├── images
    ├── logo.png
    ├── profile-1.jpg
    ├── profile-2.jpg
    ├── profile-3.jpg
    └── profile-4.jpg
├── README.md
├── constants
    ├── update-data.js
    ├── sales-analytics-data.js
    └── recent-order-data.js
├── index.js
├── index.html
└── style.css


/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoCaputo/responsive-admin-dashboard/HEAD/images/logo.png


--------------------------------------------------------------------------------
/images/profile-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoCaputo/responsive-admin-dashboard/HEAD/images/profile-1.jpg


--------------------------------------------------------------------------------
/images/profile-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoCaputo/responsive-admin-dashboard/HEAD/images/profile-2.jpg


--------------------------------------------------------------------------------
/images/profile-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoCaputo/responsive-admin-dashboard/HEAD/images/profile-3.jpg


--------------------------------------------------------------------------------
/images/profile-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoCaputo/responsive-admin-dashboard/HEAD/images/profile-4.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Admin Dashboard
2 | 
3 | Video: [Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode](https://youtu.be/BOF79TAIkYQ)
4 | 


--------------------------------------------------------------------------------
/constants/update-data.js:
--------------------------------------------------------------------------------
 1 | const UPDATE_DATA = [
 2 |   {
 3 |     imgSrc: "./images/profile-2.jpg",
 4 |     profileName: "Mike Tyson",
 5 |     message: "received his order of Night lion tech GPS drone.",
 6 |     updatedTime: "2 Minutes Ago",
 7 |   },
 8 |   {
 9 |     imgSrc: "./images/profile-3.jpg",
10 |     profileName: "Diana Ayi",
11 |     message: "declined her order of 2 DJI Air 2S.",
12 |     updatedTime: "5 Minutes Ago",
13 |   },
14 |   {
15 |     imgSrc: "./images/profile-4.jpg",
16 |     profileName: "Mandy Roy",
17 |     message: "received his order of LARVENDER KF102 Drone.",
18 |     updatedTime: "6 Minutes Ago",
19 |   },
20 | ];
21 | 


--------------------------------------------------------------------------------
/constants/sales-analytics-data.js:
--------------------------------------------------------------------------------
 1 | const SALES_ANALYTICS_DATA = [
 2 |   {
 3 |     itemClass: "online",
 4 |     icon: "shopping_cart",
 5 |     title: "ONLINE ORDERS",
 6 |     colorClass: "success",
 7 |     percentage: "+39",
 8 |     sales: "3849",
 9 |   },
10 |   {
11 |     itemClass: "offline",
12 |     icon: "local_mall",
13 |     title: "OFFLINE ORDERS",
14 |     colorClass: "danger",
15 |     percentage: "-17",
16 |     sales: "1100",
17 |   },
18 |   {
19 |     itemClass: "customers",
20 |     icon: "person",
21 |     title: "NEW CUSTOMERS",
22 |     colorClass: "danger",
23 |     percentage: "+25",
24 |     sales: "849",
25 |   },
26 | ];
27 | 


--------------------------------------------------------------------------------
/constants/recent-order-data.js:
--------------------------------------------------------------------------------
 1 | const RECENT_ORDER_DATA = [
 2 |   {
 3 |     productName: "Foldable Mini Drone",
 4 |     productNumber: "85631",
 5 |     payment: "Due",
 6 |     status: "Pending",
 7 |     statusColor: "warning",
 8 |   },
 9 |   {
10 |     productName: "LARVENDER KF102 Drone",
11 |     productNumber: "36378",
12 |     payment: "Refunded",
13 |     status: "Declined",
14 |     statusColor: "danger",
15 |   },
16 |   {
17 |     productName: "Ruko F11 Pro Drone",
18 |     productNumber: "49347",
19 |     payment: "Due",
20 |     status: "Pending",
21 |     statusColor: "warning",
22 |   },
23 |   {
24 |     productName: "Drone with Camera Drone",
25 |     productNumber: "96996",
26 |     payment: "Paid",
27 |     status: "Delivered",
28 |     statusColor: "primary",
29 |   },
30 |   {
31 |     productName: "GPS 4k Drone",
32 |     productNumber: "22821",
33 |     payment: "Paid",
34 |     status: "Delivered",
35 |     statusColor: "primary",
36 |   },
37 |   {
38 |     productName: "DJI Air 2S",
39 |     productNumber: "81475",
40 |     payment: "Due",
41 |     status: "Pending",
42 |     statusColor: "warning",
43 |   },
44 |   {
45 |     productName: "Lozenge Drone",
46 |     productNumber: "00482",
47 |     payment: "Paid",
48 |     status: "Delivered",
49 |     statusColor: "primary",
50 |   },
51 | ];
52 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | // Executes when document is loaded
  2 | document.addEventListener("DOMContentLoaded", (ev) => {
  3 |   // Recent Orders Data
  4 |   document.getElementById("recent-orders--table").appendChild(buildTableBody());
  5 | 
  6 |   // Updates Data
  7 |   document
  8 |     .getElementsByClassName("recent-updates")
  9 |     .item(0)
 10 |     .appendChild(buildUpdatesList());
 11 | 
 12 |   // Sales Analytics
 13 |   const salesAnalytics = document.getElementById("analytics");
 14 |   buildSalesAnalytics(salesAnalytics);
 15 | });
 16 | 
 17 | // Document Builder
 18 | const buildTableBody = () => {
 19 |   const recentOrderData = RECENT_ORDER_DATA;
 20 | 
 21 |   const tbody = document.createElement("tbody");
 22 | 
 23 |   let bodyContent = "";
 24 |   for (const row of recentOrderData) {
 25 |     bodyContent += `
 26 |       <tr>
 27 |         <td>${row.productName}</td>
 28 |         <td>${row.productNumber}</td>
 29 |         <td>${row.payment}</td>
 30 |         <td class="${row.statusColor}">${row.status}</td>
 31 |         <td class="primary">Details</td>
 32 |       </tr>
 33 |     `;
 34 |   }
 35 | 
 36 |   tbody.innerHTML = bodyContent;
 37 | 
 38 |   return tbody;
 39 | };
 40 | 
 41 | const buildUpdatesList = () => {
 42 |   const updateData = UPDATE_DATA;
 43 | 
 44 |   const div = document.createElement("div");
 45 |   div.classList.add("updates");
 46 | 
 47 |   let updateContent = "";
 48 |   for (const update of updateData) {
 49 |     updateContent += `
 50 |       <div class="update">
 51 |         <div class="profile-photo">
 52 |           <img src="${update.imgSrc}" />
 53 |         </div>
 54 |         <div class="message">
 55 |           <p><b>${update.profileName}</b> ${update.message}</p>
 56 |           <small class="text-muted">${update.updatedTime}</small>
 57 |         </div>
 58 |       </div>
 59 |     `;
 60 |   }
 61 | 
 62 |   div.innerHTML = updateContent;
 63 | 
 64 |   return div;
 65 | };
 66 | 
 67 | const buildSalesAnalytics = (element) => {
 68 |   const salesAnalyticsData = SALES_ANALYTICS_DATA;
 69 | 
 70 |   for (const analytic of salesAnalyticsData) {
 71 |     const item = document.createElement("div");
 72 |     item.classList.add("item");
 73 |     item.classList.add(analytic.itemClass);
 74 | 
 75 |     const itemHtml = `
 76 |       <div class="icon">
 77 |         <span class="material-icons-sharp"> ${analytic.icon} </span>
 78 |       </div>
 79 |       <div class="right">
 80 |         <div class="info">
 81 |           <h3>${analytic.title}</h3>
 82 |           <small class="text-muted"> Last 24 Hours </small>
 83 |         </div>
 84 |         <h5 class="${analytic.colorClass}">${analytic.percentage}%</h5>
 85 |         <h3>${analytic.sales}</h3>
 86 |       </div>
 87 |     `;
 88 | 
 89 |     item.innerHTML = itemHtml;
 90 | 
 91 |     element.appendChild(item);
 92 |   }
 93 | };
 94 | 
 95 | // Document operation functions
 96 | const sideMenu = document.querySelector("aside");
 97 | const menuBtn = document.querySelector("#menu-btn");
 98 | const closeBtn = document.querySelector("#close-btn");
 99 | const themeToggler = document.querySelector(".theme-toggler");
100 | 
101 | // Show Sidebar
102 | menuBtn.addEventListener("click", () => {
103 |   sideMenu.style.display = "block";
104 | });
105 | 
106 | // Hide Sidebar
107 | closeBtn.addEventListener("click", () => {
108 |   sideMenu.style.display = "none";
109 | });
110 | 
111 | // Change Theme
112 | themeToggler.addEventListener("click", () => {
113 |   document.body.classList.toggle("dark-theme-variables");
114 | 
115 |   themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
116 |   themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
117 | });
118 | 


--------------------------------------------------------------------------------
/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 Dashboard</title>
  8 | 
  9 |     <link
 10 |       href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="./style.css" />
 14 |   </head>
 15 |   <body>
 16 |     <div class="container">
 17 |       <aside>
 18 |         <div class="top">
 19 |           <div class="logo">
 20 |             <img src="./images/logo.png" alt="Logo" />
 21 |             <h2>EGA<span class="danger">TOR</span></h2>
 22 |           </div>
 23 |           <div class="close" id="close-btn">
 24 |             <span class="material-icons-sharp"> close </span>
 25 |           </div>
 26 |         </div>
 27 | 
 28 |         <div class="sidebar">
 29 |           <a href="#" class="active">
 30 |             <span class="material-icons-sharp"> dashboard </span>
 31 |             <h3>Dashboard</h3>
 32 |           </a>
 33 |           <a href="#">
 34 |             <span class="material-icons-sharp"> person_outline </span>
 35 |             <h3>Customers</h3>
 36 |           </a>
 37 |           <a href="#">
 38 |             <span class="material-icons-sharp"> receipt_long </span>
 39 |             <h3>Orders</h3>
 40 |           </a>
 41 |           <a href="#">
 42 |             <span class="material-icons-sharp"> insights </span>
 43 |             <h3>Analytics</h3>
 44 |           </a>
 45 |           <a href="#">
 46 |             <span class="material-icons-sharp"> mail_outline </span>
 47 |             <h3>Messages</h3>
 48 |             <span class="message-count">26</span>
 49 |           </a>
 50 |           <a href="#">
 51 |             <span class="material-icons-sharp"> inventory </span>
 52 |             <h3>Products</h3>
 53 |           </a>
 54 |           <a href="#">
 55 |             <span class="material-icons-sharp"> report_gmailerrorred </span>
 56 |             <h3>Reports</h3>
 57 |           </a>
 58 |           <a href="#">
 59 |             <span class="material-icons-sharp"> settings </span>
 60 |             <h3>Settings</h3>
 61 |           </a>
 62 |           <a href="#">
 63 |             <span class="material-icons-sharp"> add </span>
 64 |             <h3>Add Product</h3>
 65 |           </a>
 66 |           <a href="#">
 67 |             <span class="material-icons-sharp"> logout </span>
 68 |             <h3>Logout</h3>
 69 |           </a>
 70 |         </div>
 71 |       </aside>
 72 | 
 73 |       <main>
 74 |         <h1>Dashboard</h1>
 75 | 
 76 |         <div class="date">
 77 |           <input type="date" />
 78 |         </div>
 79 | 
 80 |         <div class="insights">
 81 |           <!-- SALES -->
 82 |           <div class="sales">
 83 |             <span class="material-icons-sharp"> analytics </span>
 84 |             <div class="middle">
 85 |               <div class="left">
 86 |                 <h3>Total Sales</h3>
 87 |                 <h1>$25,024</h1>
 88 |               </div>
 89 |               <div class="progress">
 90 |                 <svg>
 91 |                   <circle cx="38" cy="38" r="36"></circle>
 92 |                 </svg>
 93 |                 <div class="number">
 94 |                   <p>81%</p>
 95 |                 </div>
 96 |               </div>
 97 |             </div>
 98 |             <small class="text-muted"> Last 24 hours </small>
 99 |           </div>
100 | 
101 |           <!-- EXPENSES -->
102 |           <div class="expenses">
103 |             <span class="material-icons-sharp"> bar_chart </span>
104 |             <div class="middle">
105 |               <div class="left">
106 |                 <h3>Total Expenses</h3>
107 |                 <h1>$14,160</h1>
108 |               </div>
109 |               <div class="progress">
110 |                 <svg>
111 |                   <circle cx="38" cy="38" r="36"></circle>
112 |                 </svg>
113 |                 <div class="number">
114 |                   <p>62%</p>
115 |                 </div>
116 |               </div>
117 |             </div>
118 |             <small class="text-muted"> Last 24 hours </small>
119 |           </div>
120 | 
121 |           <!-- INCOME -->
122 |           <div class="income">
123 |             <span class="material-icons-sharp"> stacked_line_chart </span>
124 |             <div class="middle">
125 |               <div class="left">
126 |                 <h3>Total Income</h3>
127 |                 <h1>$10,864</h1>
128 |               </div>
129 |               <div class="progress">
130 |                 <svg>
131 |                   <circle cx="38" cy="38" r="36"></circle>
132 |                 </svg>
133 |                 <div class="number">
134 |                   <p>44%</p>
135 |                 </div>
136 |               </div>
137 |             </div>
138 |             <small class="text-muted"> Last 24 hours </small>
139 |           </div>
140 |         </div>
141 | 
142 |         <div class="recent-orders">
143 |           <h2>Recent Orders</h2>
144 |           <table id="recent-orders--table">
145 |             <thead>
146 |               <tr>
147 |                 <th>Product Name</th>
148 |                 <th>Product Number</th>
149 |                 <th>Payment</th>
150 |                 <th>Status</th>
151 |                 <th></th>
152 |               </tr>
153 |             </thead>
154 |             <!-- Add tbody here | JS insertion -->
155 |           </table>
156 |           <a href="#">Show All</a>
157 |         </div>
158 |       </main>
159 | 
160 |       <div class="right">
161 |         <div class="top">
162 |           <button id="menu-btn">
163 |             <span class="material-icons-sharp"> menu </span>
164 |           </button>
165 |           <div class="theme-toggler">
166 |             <span class="material-icons-sharp active"> light_mode </span>
167 |             <span class="material-icons-sharp"> dark_mode </span>
168 |           </div>
169 |           <div class="profile">
170 |             <div class="info">
171 |               <p>Hey, <b>Bruno</b></p>
172 |               <small class="text-muted">Admin</small>
173 |             </div>
174 |             <div class="profile-photo">
175 |               <img src="./images/profile-1.jpg" alt="Profile Picture" />
176 |             </div>
177 |           </div>
178 |         </div>
179 | 
180 |         <div class="recent-updates">
181 |           <h2>Recent Updates</h2>
182 |           <!-- Add updates div here | JS insertion -->
183 |         </div>
184 | 
185 |         <div class="sales-analytics">
186 |           <h2>Sales Analytics</h2>
187 |           <div id="analytics">
188 |             <!-- Add items div here | JS insertion -->
189 |           </div>
190 |           <div class="item add-product">
191 |             <div>
192 |               <span class="material-icons-sharp"> add </span>
193 |               <h3>Add Product</h3>
194 |             </div>
195 |           </div>
196 |         </div>
197 |       </div>
198 |     </div>
199 | 
200 |     <script src="./constants/recent-order-data.js"></script>
201 |     <script src="./constants/update-data.js"></script>
202 |     <script src="./constants/sales-analytics-data.js"></script>
203 |     <script src="./index.js"></script>
204 |   </body>
205 | </html>
206 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* DECLARATIONS */
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
  3 | 
  4 | /* ROOT VARIABLES */
  5 | :root {
  6 |   --color-primary: #7380ec;
  7 |   --color-danger: #ff7782;
  8 |   --color-success: #41f1b6;
  9 |   --color-warning: #ffbb55;
 10 |   --color-white: #fff;
 11 |   --color-info-dark: #7d8da1;
 12 |   --color-info-light: #dce1eb;
 13 |   --color-dark: #363949;
 14 |   --color-light: rgba(132, 139, 200, 0.18);
 15 |   --color-primary-variant: #111e88;
 16 |   --color-dark-variant: #677483;
 17 |   --color-background: #f6f6f9;
 18 | 
 19 |   --card-border-radius: 2rem;
 20 |   --border-radius-1: 0.4rem;
 21 |   --border-radius-2: 0.8rem;
 22 |   --border-radius-3: 1.2rem;
 23 | 
 24 |   --card-padding: 1.8rem;
 25 |   --padding-1: 1.2rem;
 26 | 
 27 |   --box-shadow: 0 2rem 3rem var(--color-light);
 28 | }
 29 | 
 30 | /* DARK THEME VARIABLES */
 31 | .dark-theme-variables {
 32 |   --color-background: #181a1e;
 33 |   --color-white: #202528;
 34 |   --color-dark: #edeffd;
 35 |   --color-dark-variant: #a3bdcc;
 36 |   --color-light: rgba(0, 0, 0, 0.4);
 37 |   --box-shadow: 0 2rem 3rem var(--color-light);
 38 | }
 39 | 
 40 | /* STYLES */
 41 | * {
 42 |   margin: 0;
 43 |   padding: 0;
 44 |   outline: 0;
 45 |   appearance: none;
 46 |   border: 0;
 47 |   text-decoration: none;
 48 |   list-style: none;
 49 |   box-sizing: border-box;
 50 | }
 51 | html {
 52 |   font-size: 14px;
 53 | }
 54 | body {
 55 |   width: 100vw;
 56 |   height: 100vh;
 57 |   font-family: poppins, sans-serif;
 58 |   font-size: 0.88rem;
 59 |   background: var(--color-background);
 60 |   user-select: none;
 61 |   overflow-x: hidden;
 62 |   color: var(--color-dark);
 63 | }
 64 | .container {
 65 |   display: grid;
 66 |   width: 96%;
 67 |   margin: 0 auto;
 68 |   gap: 1.8rem;
 69 |   grid-template-columns: 14rem auto 23rem;
 70 | }
 71 | a {
 72 |   color: var(--color-dark);
 73 | }
 74 | img {
 75 |   display: block;
 76 |   width: 100%;
 77 | }
 78 | h1 {
 79 |   font-weight: 800;
 80 |   font-size: 1.8rem;
 81 | }
 82 | h2 {
 83 |   font-size: 1.4rem;
 84 | }
 85 | h3 {
 86 |   font-size: 0.87rem;
 87 | }
 88 | h4 {
 89 |   font-size: 0.8rem;
 90 | }
 91 | h5 {
 92 |   font-family: 0.77rem;
 93 | }
 94 | small {
 95 |   font-size: 0.75rem;
 96 | }
 97 | .profile-photo {
 98 |   width: 2.8rem;
 99 |   height: 2.8rem;
100 |   border-radius: 50%;
101 |   overflow: hidden;
102 | }
103 | .text-muted {
104 |   color: var(--color-info-dark);
105 | }
106 | p {
107 |   color: var(--color-dark-variant);
108 | }
109 | b {
110 |   color: var(--color-dark);
111 | }
112 | .primary {
113 |   color: var(--color-primary);
114 | }
115 | .danger {
116 |   color: var(--color-danger);
117 | }
118 | .success {
119 |   color: var(--color-success);
120 | }
121 | .warning {
122 |   color: var(--color-warning);
123 | }
124 | 
125 | /* START ASIDE */
126 | aside {
127 |   height: 100vh;
128 | }
129 | aside .top {
130 |   display: flex;
131 |   align-items: center;
132 |   justify-content: space-between;
133 |   margin-top: 1.4rem;
134 | }
135 | aside .logo {
136 |   display: flex;
137 |   gap: 0.8rem;
138 | }
139 | aside .logo img {
140 |   width: 2rem;
141 |   height: 2rem;
142 | }
143 | aside .close {
144 |   display: none;
145 | }
146 | 
147 | /* START SIDEBAR */
148 | aside .sidebar {
149 |   display: flex;
150 |   flex-direction: column;
151 |   height: 86vh;
152 |   position: relative;
153 |   top: 3rem;
154 | }
155 | aside h3 {
156 |   font-weight: 500;
157 | }
158 | aside .sidebar a {
159 |   display: flex;
160 |   color: var(--color-info-dark);
161 |   margin-left: 2rem;
162 |   gap: 1rem;
163 |   align-items: center;
164 |   position: relative;
165 |   height: 3.7rem;
166 |   transition: all 300ms ease;
167 | }
168 | aside .sidebar a span {
169 |   font-size: 1.6rem;
170 |   transition: all 300ms ease;
171 | }
172 | aside .sidebar a:last-child {
173 |   position: absolute;
174 |   bottom: 2rem;
175 |   width: 100%;
176 | }
177 | aside .sidebar a.active {
178 |   background: var(--color-light);
179 |   color: var(--color-primary);
180 |   margin-left: 0;
181 | }
182 | aside .sidebar a.active:before {
183 |   content: "";
184 |   width: 6px;
185 |   height: 100%;
186 |   background: var(--color-primary);
187 | }
188 | aside .sidebar a.active span {
189 |   color: var(--color-primary);
190 |   margin-left: calc(1rem - 6px);
191 | }
192 | aside .sidebar a:hover {
193 |   color: var(--color-primary);
194 | }
195 | aside .sidebar a:hover span {
196 |   margin-left: 1rem;
197 | }
198 | aside .sidebar .message-count {
199 |   background: var(--color-danger);
200 |   color: var(--color-white);
201 |   padding: 2px 10px;
202 |   font-size: 11px;
203 |   border-radius: var(--border-radius-1);
204 | }
205 | /* END SIDEBAR */
206 | /* END ASIDE */
207 | 
208 | /* START MAIN */
209 | main {
210 |   margin-top: 1.4rem;
211 | }
212 | 
213 | /* START DATE INPUT */
214 | main .date {
215 |   display: inline-block;
216 |   background: var(--color-light);
217 |   border-radius: var(--border-radius-1);
218 |   margin-top: 1rem;
219 |   padding: 0.5rem 1.6rem;
220 | }
221 | main .date input[type="date"] {
222 |   background: transparent;
223 |   color: var(--color-dark);
224 | }
225 | /* END DATE INPUT */
226 | 
227 | /* START INSIGHTS */
228 | main .insights {
229 |   display: grid;
230 |   grid-template-columns: repeat(3, 1fr);
231 |   gap: 1.6rem;
232 | }
233 | main .insights > div {
234 |   background: var(--color-white);
235 |   padding: var(--card-padding);
236 |   border-radius: var(--card-border-radius);
237 |   margin-top: 1rem;
238 |   box-shadow: var(--box-shadow);
239 |   transition: all 300ms ease;
240 | }
241 | main .insights > div:hover {
242 |   cursor: pointer;
243 |   box-shadow: none;
244 | }
245 | main .insights > div span {
246 |   background: var(--color-primary);
247 |   padding: 0.5rem;
248 |   border-radius: 50%;
249 |   color: var(--color-white);
250 |   font-size: 2rem;
251 | }
252 | main .insights > div.expenses span {
253 |   background: var(--color-danger);
254 | }
255 | main .insights > div.income span {
256 |   background: var(--color-success);
257 | }
258 | main .insights > div .middle {
259 |   display: flex;
260 |   align-items: center;
261 |   justify-content: space-between;
262 | }
263 | main .insights h3 {
264 |   margin: 1rem 0 0.6rem;
265 |   font-size: 1rem;
266 | }
267 | main .insights .progress {
268 |   position: relative;
269 |   width: 92px;
270 |   height: 92px;
271 |   border-radius: 50%;
272 | }
273 | main .insights svg {
274 |   width: 7rem;
275 |   height: 7rem;
276 | }
277 | main .insights svg circle {
278 |   fill: none;
279 |   stroke: var(--color-primary);
280 |   stroke-width: 14;
281 |   stroke-linecap: round;
282 |   transform: translate(5px, 5px);
283 |   stroke-dasharray: 110;
284 |   stroke-dashoffset: 92;
285 | }
286 | main .insights .sales svg circle {
287 |   stroke-dashoffset: -30;
288 |   stroke-dasharray: 200;
289 | }
290 | main .insights .expenses svg circle {
291 |   stroke-dashoffset: 20;
292 |   stroke-dasharray: 80;
293 | }
294 | main .insights .income svg circle {
295 |   stroke-dashoffset: 35;
296 | }
297 | main .insights .progress .number {
298 |   position: absolute;
299 |   top: -2px;
300 |   left: -2px;
301 |   height: 100%;
302 |   width: 100%;
303 |   display: flex;
304 |   justify-content: center;
305 |   align-items: center;
306 | }
307 | main .insights small {
308 |   margin-top: 1.6rem;
309 |   display: block;
310 | }
311 | /* END INSIGHTS */
312 | 
313 | /* START RECENT ORDERS */
314 | main .recent-orders {
315 |   margin-top: 2rem;
316 | }
317 | main .recent-orders h2 {
318 |   margin-bottom: 0.8rem;
319 | }
320 | main .recent-orders table {
321 |   background: var(--color-white);
322 |   width: 100%;
323 |   border-radius: var(--card-border-radius);
324 |   padding: var(--card-padding);
325 |   text-align: center;
326 |   box-shadow: var(--box-shadow);
327 |   transition: all 300ms ease;
328 | }
329 | main .recent-orders table:hover {
330 |   cursor: pointer;
331 |   box-shadow: none;
332 | }
333 | main table tbody td {
334 |   height: 2.8rem;
335 |   border-bottom: 1px solid var(--color-light);
336 |   color: var(--color-dark-variant);
337 | }
338 | main table tbody tr:last-child td {
339 |   border: none;
340 | }
341 | main .recent-orders a {
342 |   text-align: center;
343 |   display: block;
344 |   margin: 1rem auto;
345 |   color: var(--color-primary);
346 | }
347 | /* END RECENT ORDERS */
348 | 
349 | /* START RIGHT SECTION */
350 | .right {
351 |   margin-top: 1.4rem;
352 | }
353 | .right .top {
354 |   display: flex;
355 |   justify-content: end;
356 |   gap: 2rem;
357 | }
358 | .right .top button {
359 |   display: none;
360 | }
361 | .right .theme-toggler {
362 |   background: var(--color-light);
363 |   display: flex;
364 |   justify-content: space-between;
365 |   align-items: center;
366 |   height: 1.6rem;
367 |   width: 4.2rem;
368 |   cursor: pointer;
369 |   border-radius: var(--border-radius-1);
370 | }
371 | .right .theme-toggler span {
372 |   font-size: 1.2rem;
373 |   width: 50%;
374 |   height: 100%;
375 |   display: flex;
376 |   align-items: center;
377 |   justify-content: center;
378 | }
379 | .right .theme-toggler span.active {
380 |   background: var(--color-primary);
381 |   color: white;
382 |   border-radius: var(--border-radius-1);
383 | }
384 | .right .top .profile {
385 |   display: flex;
386 |   gap: 2rem;
387 |   text-align: right;
388 | }
389 | 
390 | /* START RECENT UPDATES */
391 | .right .recent-updates {
392 |   margin-top: 1rem;
393 | }
394 | .right .recent-updates h2 {
395 |   margin-bottom: 0.8rem;
396 | }
397 | .right .recent-updates .updates {
398 |   background: var(--color-white);
399 |   padding: var(--card-padding);
400 |   border-radius: var(--card-border-radius);
401 |   box-shadow: var(--box-shadow);
402 |   transition: all 300ms ease;
403 | }
404 | .right .recent-updates .updates:hover {
405 |   cursor: pointer;
406 |   box-shadow: none;
407 | }
408 | .right .recent-updates .updates .update {
409 |   display: grid;
410 |   grid-template-columns: 2.6rem auto;
411 |   gap: 1rem;
412 |   margin-bottom: 1rem;
413 | }
414 | /* END RECENT UPDATES */
415 | 
416 | /* START SALES ANALYTICS */
417 | .right .sales-analytics {
418 |   margin-top: 2rem;
419 | }
420 | .right .sales-analytics h2 {
421 |   margin-bottom: 0.8rem;
422 | }
423 | .right .sales-analytics .item {
424 |   background: var(--color-white);
425 |   display: flex;
426 |   align-items: center;
427 |   gap: 1rem;
428 |   margin-bottom: 0.7rem;
429 |   padding: 1.4rem var(--card-padding);
430 |   border-radius: var(--border-radius-3);
431 |   box-shadow: var(--box-shadow);
432 |   transition: all 300ms ease;
433 | }
434 | .right .sales-analytics .item:hover {
435 |   cursor: pointer;
436 |   box-shadow: none;
437 | }
438 | .right .sales-analytics .item .right {
439 |   display: flex;
440 |   justify-content: space-between;
441 |   align-items: start;
442 |   margin: 0;
443 |   width: 100%;
444 | }
445 | .right .sales-analytics .item .icon {
446 |   padding: 0.6rem;
447 |   color: var(--color-white);
448 |   border-radius: 50%;
449 |   background: var(--color-primary);
450 |   display: flex;
451 | }
452 | .right .sales-analytics .item.offline .icon {
453 |   background: var(--color-danger);
454 | }
455 | .right .sales-analytics .item.customers .icon {
456 |   background: var(--color-success);
457 | }
458 | .right .sales-analytics .add-product {
459 |   background: transparent;
460 |   border: 2px dashed var(--color-primary);
461 |   color: var(--color-primary);
462 |   display: flex;
463 |   align-items: center;
464 |   justify-content: center;
465 | }
466 | .right .sales-analytics .add-product:hover {
467 |   background: var(--color-primary);
468 |   color: white;
469 | }
470 | .right .sales-analytics .add-product div {
471 |   display: flex;
472 |   align-items: center;
473 |   gap: 0.6rem;
474 | }
475 | .right .sales-analytics .add-product h3 {
476 |   font-weight: 600;
477 | }
478 | /* END SALES ANALYTICS */
479 | /* END RIGHT SECTION */
480 | 
481 | /* START MEDIA QUERIES */
482 | /* TABLETS AND SMALL LAPTOPS */
483 | @media screen and (max-width: 1200px) {
484 |   .container {
485 |     width: 94%;
486 |     grid-template-columns: 7rem auto 23rem;
487 |   }
488 |   aside .logo h2 {
489 |     display: none;
490 |   }
491 |   aside .sidebar h3 {
492 |     display: none;
493 |   }
494 |   aside .sidebar a {
495 |     width: 5.6rem;
496 |   }
497 |   aside .sidebar a:last-child {
498 |     position: relative;
499 |     margin-top: 1.8rem;
500 |   }
501 |   main .insights {
502 |     grid-template-columns: 1fr;
503 |     gap: 0;
504 |   }
505 |   main .recent-orders {
506 |     width: 94%;
507 |     position: absolute;
508 |     left: 50%;
509 |     transform: translateX(-50%);
510 |     margin: 2rem 0 0 8.8rem;
511 |   }
512 |   main .recent-orders table {
513 |     width: 83vw;
514 |   }
515 |   main .recent-orders table thead tr th:first-child,
516 |   main .recent-orders table thead tr th:last-child {
517 |     display: none;
518 |   }
519 |   main .recent-orders table tbody tr td:first-child,
520 |   main .recent-orders table tbody tr td:last-child {
521 |     display: none;
522 |   }
523 | }
524 | 
525 | /* SMALL TABLETS AND MOBILE */
526 | @media screen and (max-width: 768px) {
527 |   .container {
528 |     width: 100%;
529 |     grid-template-columns: 1fr;
530 |   }
531 |   aside {
532 |     position: fixed;
533 |     left: -100%;
534 |     background: var(--color-white);
535 |     width: 18rem;
536 |     z-index: 3;
537 |     box-shadow: 1rem 3rem 4rem var(--color-light);
538 |     height: 100vh;
539 |     padding-right: var(--card-padding);
540 |     display: none;
541 |     animation: showMenu 400ms ease forwards;
542 |   }
543 |   @keyframes showMenu {
544 |     to {
545 |       left: 0;
546 |     }
547 |   }
548 |   aside .logo {
549 |     margin-left: 1rem;
550 |   }
551 |   aside .logo h2 {
552 |     display: inline;
553 |   }
554 |   aside .sidebar h3 {
555 |     display: inline;
556 |   }
557 |   aside .sidebar a {
558 |     width: 100%;
559 |     height: 3.4rem;
560 |   }
561 |   aside .sidebar a:last-child {
562 |     position: absolute;
563 |     bottom: 5rem;
564 |   }
565 |   aside .close {
566 |     display: inline-block;
567 |     cursor: pointer;
568 |   }
569 |   main {
570 |     margin-top: 8rem;
571 |     padding: 0 1rem;
572 |   }
573 |   main .recent-orders {
574 |     position: relative;
575 |     margin: 3rem 0 0 0;
576 |     width: 100%;
577 |   }
578 |   main .recent-orders table {
579 |     width: 100%;
580 |     margin: 0;
581 |   }
582 |   .right {
583 |     width: 94%;
584 |     margin: 0 auto 4rem;
585 |   }
586 |   .right .top {
587 |     position: fixed;
588 |     top: 0;
589 |     left: 0;
590 |     align-items: center;
591 |     padding: 0 0.8rem;
592 |     height: 4.6rem;
593 |     background: var(--color-white);
594 |     width: 100%;
595 |     margin: 0;
596 |     z-index: 2;
597 |     box-shadow: 0 1rem 1rem var(--color-light);
598 |   }
599 |   .right .top .theme-toggler {
600 |     width: 4.4rem;
601 |     position: absolute;
602 |     left: 66%;
603 |   }
604 |   .right .top .profile .info {
605 |     display: none;
606 |   }
607 |   .right .top button {
608 |     display: inline-block;
609 |     background: transparent;
610 |     cursor: pointer;
611 |     color: var(--color-dark);
612 |     position: absolute;
613 |     left: 1rem;
614 |   }
615 |   .right .top button span {
616 |     font-size: 2rem;
617 |   }
618 | }
619 | /* END MEDIA QUERIES */
620 | 


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