├── logo.png
├── plus.png
├── mohit108.PNG
├── mohit2.PNG
├── podcast.jpg
├── profile.png
├── profile-1.jpg
├── profile-2.jpg
├── profile-3.jpg
├── profile-4.jpg
├── orders.js
├── index.js
├── README.md
├── script.js
├── index1.html
├── index.html
├── style.css
└── style1.css


/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/logo.png


--------------------------------------------------------------------------------
/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/plus.png


--------------------------------------------------------------------------------
/mohit108.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/mohit108.PNG


--------------------------------------------------------------------------------
/mohit2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/mohit2.PNG


--------------------------------------------------------------------------------
/podcast.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/podcast.jpg


--------------------------------------------------------------------------------
/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile.png


--------------------------------------------------------------------------------
/profile-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-1.jpg


--------------------------------------------------------------------------------
/profile-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-2.jpg


--------------------------------------------------------------------------------
/profile-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-3.jpg


--------------------------------------------------------------------------------
/profile-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-4.jpg


--------------------------------------------------------------------------------
/orders.js:
--------------------------------------------------------------------------------
 1 | const Orders = [
 2 |     {
 3 |         productName: 'JavaScript Tutorial',
 4 |         productNumber: '85743',
 5 |         paymentStatus: 'Due',
 6 |         status: 'Pending'
 7 |     },
 8 |     {
 9 |         productName: 'CSS Full Course',
10 |         productNumber: '97245',
11 |         paymentStatus: 'Refunded',
12 |         status: 'Declined'
13 |     },
14 |     {
15 |         productName: 'Flex-Box Tutorial',
16 |         productNumber: '36452',
17 |         paymentStatus: 'Paid',
18 |         status: 'Active'
19 |     },
20 | ]
21 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const sideMenu = document.querySelector('aside');
 2 | const menuBtn = document.getElementById('menu-btn');
 3 | const closeBtn = document.getElementById('close-btn');
 4 | 
 5 | const darkMode = document.querySelector('.dark-mode');
 6 | 
 7 | menuBtn.addEventListener('click', () => {
 8 |     sideMenu.style.display = 'block';
 9 | });
10 | 
11 | closeBtn.addEventListener('click', () => {
12 |     sideMenu.style.display = 'none';
13 | });
14 | 
15 | darkMode.addEventListener('click', () => {
16 |     document.body.classList.toggle('dark-mode-variables');
17 |     darkMode.querySelector('span:nth-child(1)').classList.toggle('active');
18 |     darkMode.querySelector('span:nth-child(2)').classList.toggle('active');
19 | })
20 | 
21 | 
22 | Orders.forEach(order => {
23 |     const tr = document.createElement('tr');
24 |     const trContent = `
25 |         <td>${order.productName}</td>
26 |         <td>${order.productNumber}</td>
27 |         <td>${order.paymentStatus}</td>
28 |         <td class="${order.status === 'Declined' ? 'danger' : order.status === 'Pending' ? 'warning' : 'primary'}">${order.status}</td>
29 |         <td class="primary">Details</td>
30 |     `;
31 |     tr.innerHTML = trContent;
32 |     document.querySelector('table tbody').appendChild(tr);
33 | });
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # responsive-dashboard-and-user-dashboard
 2 |  <div align="center">
 3 |   <img src="mohit108.PNG" alt="DevOpsShack Banner">
 4 | </div>
 5 | 
 6 | ## Overview
 7 | This project is a responsive user dashboard built using HTML, CSS, and JavaScript. The dashboard provides a clean and intuitive interface for users to view key metrics, manage tasks, or interact with data. It is designed to adapt seamlessly across various devices, including desktops, tablets, and mobile phones.
 8 | 
 9 | ## Features
10 | 
11 | - Responsive Design: Adapts to different screen sizes for optimal user experience.
12 | - Interactive Elements: Includes dynamic components such as toggles, modals, or charts powered by JavaScript.
13 | - Modern Styling: Utilizes CSS for a sleek, professional appearance with smooth transitions and hover effects.
14 | - Modular Structure: Organized codebase for easy customization and scalability.
15 | 
16 | <div align="center">
17 |   <img src="mohit2.PNG" alt="DevOpsShack Banner">
18 | </div>
19 |    
20 | ### Tools and Modules 
21 | ![](https://img.shields.io/badge/Programming_Language-HTML-orange.svg)
22 | ![](https://img.shields.io/badge/Programming_Language-CSS-blue.svg)
23 | ![](https://img.shields.io/badge/Programming_Language-JS-yellow.svg)
24 | ![](https://img.shields.io/badge/Application-visualization-lemon.svg)
25 | ![](https://img.shields.io/badge/Status-Complete-green.svg)
26 | ## Folder Structure
27 | ```
28 | responsive-user-dashboard/
29 | ├── assets/
30 | │   ├── images/       # Image assets
31 | │   ├── css/          # CSS files (e.g., styles.css`)
32 | │   └── js/           # JavaScript files (e.g., script.js`)
33 | ├── index.html        # Main HTML entry point
34 | └── README.md         # Project documentation
35 | ```
36 | 
37 | 
38 | ## Browser Compatibility
39 | The dashboard is compatible with modern browsers, including:
40 | - Google Chrome
41 | - Mozilla Firefox
42 | - Safari
43 | - Edge
44 | 
45 | For older browsers, some features may require polyfills or fallback styles.
46 | 
47 | 
48 | 
49 | ## License
50 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
51 | 
52 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const ctx = document.querySelector('.activity-chart');
 2 | const ctx2 = document.querySelector('.prog-chart');
 3 | 
 4 | new Chart(ctx, {
 5 |     type: 'bar',
 6 |     data: {
 7 |         labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
 8 |         datasets: [{
 9 |             label: 'Time',
10 |             data: [8, 6, 7, 6, 10, 8, 4],
11 |             backgroundColor: '#1e293b',
12 |             borderWidth: 3,
13 |             borderRadius: 6,
14 |             hoverBackgroundColor: '#60a5fa'
15 |         }]
16 |     },
17 |     options: {
18 |         responsive: true,
19 |         maintainAspectRatio: false,
20 |         scales: {
21 |             x: {
22 |                 border: {
23 |                     display: true
24 |                 },
25 |                 grid: {
26 |                     display: true,
27 |                     color: '#1e293b'
28 |                 }
29 |             },
30 |             y: {
31 |                 ticks: {
32 |                     display: false
33 |                 }
34 |             }
35 |         },
36 |         plugins: {
37 |             legend: {
38 |                 display: false
39 |             }
40 |         },
41 |         animation: {
42 |             duration: 1000,
43 |             easing: 'easeInOutQuad',
44 |         }
45 |     }
46 | });
47 | 
48 | new Chart(ctx2, {
49 |     type: 'line',
50 |     data: {
51 |         labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
52 |         datasets: [{
53 |             label: 'Class GPA',
54 |             data: [6, 10, 8, 14, 6, 7, 4],
55 |             borderColor: '#0891b2',
56 |             tension: 0.4
57 |         },
58 |         {
59 |             label: 'Aver GPA',
60 |             data: [8, 6, 7, 6, 11, 8, 10],
61 |             borderColor: '#ca8a04',
62 |             tension: 0.4
63 |         }
64 |         ]
65 |     },
66 |     options: {
67 |         responsive: true,
68 |         maintainAspectRatio: true,
69 |         scales: {
70 |             x: {
71 |                 grid: {
72 |                     display: false,
73 |                 }
74 |             },
75 |             y: {
76 |                 ticks: {
77 |                     display: false
78 |                 },
79 |                 border: {
80 |                     display: false,
81 |                     dash: [5, 5]
82 |                 }
83 |             }
84 |         },
85 |         plugins: {
86 |             legend: {
87 |                 display: false
88 |             }
89 |         },
90 |         animation: {
91 |             duration: 1000,
92 |             easing: 'easeInOutQuad',
93 |         }
94 |     }
95 | });
96 | 


--------------------------------------------------------------------------------
/index1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Design | Mohit</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <div class="top-container">
 15 | 
 16 |         <div class="nav">
 17 |             <div class="logo">
 18 |                 <i class='bx bxl-codepen'></i>
 19 |                 <a href="#">Mohit</a>
 20 |             </div>
 21 | 
 22 |             <div class="nav-links">
 23 |                 <a href="#">Dashboard</a>
 24 |                 <a href="#">Statistics</a>
 25 |                 <a href="#">Courses</a>
 26 |                 <a href="#">Settings</a>
 27 |             </div>
 28 | 
 29 |             <div class="right-section">
 30 |                 <i class='bx bx-bell'></i>
 31 |                 <i class='bx bx-search'></i>
 32 | 
 33 |                 <div class="profile">
 34 |                     <div class="info">
 35 |                         <img src="assets/profile.png">
 36 |                         <div>
 37 |                             <a href="#">Alex Johnson</a>
 38 |                             <p>Data Scientist</p>
 39 |                         </div>
 40 |                     </div>
 41 |                     <i class='bx bx-chevron-down'></i>
 42 |                 </div>
 43 |             </div>
 44 | 
 45 |         </div>
 46 | 
 47 |         <div class="status">
 48 |             <div class="header">
 49 |                 <h4 id="big">Your courses</h4>
 50 |                 <h4 id="small">Weekly Activity</h4>
 51 |             </div>
 52 | 
 53 |             <div class="items-list">
 54 |                 <div class="item">
 55 |                     <div class="info">
 56 |                         <div>
 57 |                             <h5>Data Analysis</h5>
 58 |                             <p>- 3 lessons left</p>
 59 |                             <p>- 1 project left</p>
 60 |                         </div>
 61 |                         <i class='bx bx-data'></i>
 62 |                     </div>
 63 |                     <div class="progress">
 64 |                         <div class="bar"></div>
 65 |                     </div>
 66 |                 </div>
 67 |                 <div class="item">
 68 |                     <div class="info">
 69 |                         <div>
 70 |                             <h5>Machine Learn</h5>
 71 |                             <p>- 2 assignments left</p>
 72 |                             <p>- 5 tutorials left</p>
 73 |                         </div>
 74 |                         <i class='bx bx-terminal'></i>
 75 |                     </div>
 76 |                     <div class="progress">
 77 |                         <div class="bar"></div>
 78 |                     </div>
 79 |                 </div>
 80 |                 <div class="item">
 81 |                     <div class="info">
 82 |                         <div>
 83 |                             <h5>Python</h5>
 84 |                             <p>- 4 chapters left</p>
 85 |                             <p>- 8 quizzes left</p>
 86 |                         </div>
 87 |                         <i class='bx bxl-python'></i>
 88 |                     </div>
 89 |                     <div class="progress">
 90 |                         <div class="bar"></div>
 91 |                     </div>
 92 |                 </div>
 93 |                 <div class="item">
 94 |                     <canvas class="activity-chart"></canvas>
 95 |                 </div>
 96 |             </div>
 97 | 
 98 |         </div>
 99 | 
100 | 
101 | 
102 |     </div>
103 | 
104 | 
105 |     <div class="bottom-container">
106 | 
107 |         <div class="prog-status">
108 |             <div class="header">
109 |                 <h4>learning Progress</h4>
110 |                 <div class="tabs">
111 |                     <a href="#" class="active">1Y</a>
112 |                     <a href="#">6M</a>
113 |                     <a href="#">3M</a>
114 |                 </div>
115 |             </div>
116 | 
117 |             <div class="details">
118 |                 <div class="item">
119 |                     <h2>3.45</h2>
120 |                     <p>Current GPA</p>
121 |                 </div>
122 |                 <div class="separator"></div>
123 |                 <div class="item">
124 |                     <h2>4.78</h2>
125 |                     <p>Class Average GPA</p>
126 |                 </div>
127 |             </div>
128 | 
129 |             <canvas class="prog-chart"></canvas>
130 | 
131 |         </div>
132 | 
133 |         <div class="popular">
134 |             <div class="header">
135 |                 <h4>Popular</h4>
136 |                 <a href="#"># Data</a>
137 |             </div>
138 | 
139 |             <img src="podcast.jpg">
140 |             <div class="audio">
141 |                 <i class='bx bx-podcast'></i>
142 |                 <a href="#">Poedcast: Mastering Data Visualization</a>
143 |             </div>
144 |             <p>Learn to create compelling visualizations with data.</p>
145 |             <div class="listen">
146 |                 <div class="author">
147 |                     <img src="profile.png">
148 |                     <div>
149 |                         <a href="#">Alex</a>
150 |                         <p>Data Analyst</p>
151 |                     </div>
152 |                 </div>
153 |                 <button>Listen<i class='bx bx-right-arrow-alt'></i></button>
154 |             </div>
155 | 
156 |         </div>
157 | 
158 | 
159 |         <div class="upcoming">
160 | 
161 |             <div class="header">
162 |                 <h4>You may like it</h4>
163 |                 <a href="#">July <i class='bx bx-chevron-down'></i></a>
164 |             </div>
165 | 
166 |             <div class="dates">
167 |                 <div class="item">
168 |                     <h5>Mo</h5>
169 |                     <a href="#">12</a>
170 |                 </div>
171 |                 <div class="item active">
172 |                     <h5>Tu</h5>
173 |                     <a href="#">13</a>
174 |                 </div>
175 |                 <div class="item">
176 |                     <h5>We</h5>
177 |                     <a href="#">14</a>
178 |                 </div>
179 |                 <div class="item">
180 |                     <h5>Th</h5>
181 |                     <a href="#">15</a>
182 |                 </div>
183 |                 <div class="item">
184 |                     <h5>Fr</h5>
185 |                     <a href="#">16</a>
186 |                 </div>
187 |                 <div class="item">
188 |                     <h5>Sa</h5>
189 |                     <a href="#">17</a>
190 |                 </div>
191 |                 <div class="item">
192 |                     <h5>Su</h5>
193 |                     <a href="#">18</a>
194 |                 </div>
195 |             </div>
196 | 
197 |             <div class="events">
198 |                 <div class="item">
199 |                     <div>
200 |                         <i class='bx bx-time'></i>
201 |                         <div class="event-info">
202 |                             <a href="#">Data Science</a>
203 |                             <p>10:00-11:30</p>
204 |                         </div>
205 |                     </div>
206 |                     <i class='bx bx-dots-horizontal-rounded'></i>
207 |                 </div>
208 |                 <div class="item">
209 |                     <div>
210 |                         <i class='bx bx-time'></i>
211 |                         <div class="event-info">
212 |                             <a href="#">Machine Learning</a>
213 |                             <p>13:30-15:00</p>
214 |                         </div>
215 |                     </div>
216 |                     <i class='bx bx-dots-horizontal-rounded'></i>
217 |                 </div>
218 |                 <div class="item">
219 |                     <div>
220 |                         <i class='bx bx-time'></i>
221 |                         <div class="event-info">
222 |                             <a href="#">Beginner Python</a>
223 |                             <p>11:30-13:00</p>
224 |                         </div>
225 |                     </div>
226 |                     <i class='bx bx-dots-horizontal-rounded'></i>
227 |                 </div>
228 |                 <div class="item">
229 |                     <div>
230 |                         <i class='bx bx-time'></i>
231 |                         <div class="event-info">
232 |                             <a href="#">Introduction to SQL</a>
233 |                             <p>10:00-11:30</p>
234 |                         </div>
235 |                     </div>
236 |                     <i class='bx bx-dots-horizontal-rounded'></i>
237 |                 </div>
238 |             </div>
239 | 
240 |         </div>
241 | 
242 |     </div>
243 | 
244 | 
245 | 
246 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
247 |     <script src="script.js"></script>
248 | 
249 | </body>
250 | 
251 | </html>
252 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
  7 |     <link rel="stylesheet" href="style1.css">
  8 |     <title>Responsive-Design|Mohit</title>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <div class="container">
 13 |         <!-- Sidebar Section -->
 14 |         <aside>
 15 |             <div class="toggle">
 16 |                 <div class="logo">
 17 |                     <img src="logo.png">
 18 |                     <h2>Asm<span class="danger">Prog</span></h2>
 19 |                 </div>
 20 |                 <div class="close" id="close-btn">
 21 |                     <span class="material-icons-sharp">
 22 |                         close-up
 23 |                     </span>
 24 |                 </div>
 25 |             </div>
 26 | 
 27 |             <div class="sidebar">
 28 |                 <a href="#">
 29 |                     <span class="material-icons-sharp">
 30 |                         Dashboard
 31 |                     </span>
 32 |                     <h3>Dashboard</h3>
 33 |                 </a>
 34 |                 <a href="#">
 35 |                     <span class="material-icons-sharp">
 36 |                         person-outline
 37 |                     </span>
 38 |                     <h3>Users</h3>
 39 |                 </a>
 40 |                 <a href="#">
 41 |                     <span class="material-icons-sharp">
 42 |                         receipt-Long
 43 |                     </span>
 44 |                     <h3>History</h3>
 45 |                 </a>
 46 |                 <a href="#" class="active">
 47 |                     <span class="material-icons-sharp">
 48 |                         insights
 49 |                     </span>
 50 |                     <h3>Analytics</h3>
 51 |                 </a>
 52 |                 <a href="#">
 53 |                     <span class="material-icons-sharp">
 54 |                         mail-outline
 55 |                     </span>
 56 |                     <h3>Ticket</h3>
 57 |                     <span class="message-count">27</span>
 58 |                 </a>
 59 |                 <a href="#">
 60 |                     <span class="material-icons-sharp">
 61 |                         inventory
 62 |                     </span>
 63 |                     <h3>Sale-List</h3>
 64 |                 </a>
 65 |                 <a href="#">
 66 |                     <span class="material-icons-sharp">
 67 |                         report-gmailerrorred
 68 |                     </span>
 69 |                     <h3>Reports</h3>
 70 |                 </a>
 71 |                 <a href="#">
 72 |                     <span class="material-icons-sharp">
 73 |                         settings
 74 |                     </span>
 75 |                     <h3>Settings</h3>
 76 |                 </a>
 77 |                 <a href="#">
 78 |                     <span class="material-icons-sharp">
 79 |                         add
 80 |                     </span>
 81 |                     <h3>New Login</h3>
 82 |                 </a>
 83 |                 <a href="#">
 84 |                     <span class="material-icons-sharp">
 85 |                         logout
 86 |                     </span>
 87 |                     <h3>Logout</h3>
 88 |                 </a>
 89 |             </div>
 90 |         </aside>
 91 |         <!-- End of Sidebar Section -->
 92 | 
 93 |         <!-- Main Content -->
 94 |         <main>
 95 |             <h1>Analytics</h1>
 96 |             <!-- Analyses -->
 97 |             <div class="analyse">
 98 |                 <div class="sales">
 99 |                     <div class="status">
100 |                         <div class="info">
101 |                             <h3>Total Sale's</h3>
102 |                             <h1>$5532</h1>
103 |                         </div>
104 |                         <div class="progresss">
105 |                             <svg>
106 |                                 <circle cx="38" cy="38" r="36"></circle>
107 |                             </svg>
108 |                             <div class="percentage">
109 |                                 <p>80%</p>
110 |                             </div>
111 |                         </div>
112 |                     </div>
113 |                 </div>
114 |                 <div class="visits">
115 |                     <div class="status">
116 |                         <div class="info">
117 |                             <h3>Site Visit</h3>
118 |                             <h1>2481</h1>
119 |                         </div>
120 |                         <div class="progresss">
121 |                             <svg>
122 |                                 <circle cx="38" cy="38" r="36"></circle>
123 |                             </svg>
124 |                             <div class="percentage">
125 |                                 <p>48%</p>
126 |                             </div>
127 |                         </div>
128 |                     </div>
129 |                 </div>
130 |                 <div class="searches">
131 |                     <div class="status">
132 |                         <div class="info">
133 |                             <h3>Searches</h3>
134 |                             <h1>1147</h1>
135 |                         </div>
136 |                         <div class="progresss">
137 |                             <svg>
138 |                                 <circle cx="38" cy="38" r="36"></circle>
139 |                             </svg>
140 |                             <div class="percentage">
141 |                                 <p>21%</p>
142 |                             </div>
143 |                         </div>
144 |                     </div>
145 |                 </div>
146 |             </div>
147 |             <!-- End of Analyses -->
148 | 
149 |             <!-- New Users Section -->
150 |             <div class="new-users">
151 |                 <h2>New Users</h2>
152 |                 <div class="user-list">
153 |                     <div class="user">
154 |                         <img src="profile-2.jpg">
155 |                         <h2>Jack</h2>
156 |                         <p>53 Min Ago</p>
157 |                     </div>
158 |                     <div class="user">
159 |                         <img src="profile-3.jpg">
160 |                         <h2>Amir</h2>
161 |                         <p>3 Hours Ago</p>
162 |                     </div>
163 |                     <div class="user">
164 |                         <img src="profile-4.jpg">
165 |                         <h2>Ember</h2>
166 |                         <p>6 Hours Ago</p>
167 |                     </div>
168 |                     <div class="user">
169 |                         <img src="plus.png">
170 |                         <h2>More</h2>
171 |                         <p>New User</p>
172 |                     </div>
173 |                 </div>
174 |             </div>
175 |             <!-- End of New Users Section -->
176 | 
177 |             <!-- Recent Orders Table -->
178 |             <div class="recent-orders">
179 |                 <h2>Recent Orders</h2>
180 |                 <table>
181 |                     <thead>
182 |                         <tr>
183 |                             <th>Course Name</th>
184 |                             <th>Course Number</th>
185 |                             <th>Payment</th>
186 |                             <th>Status</th>
187 |                             <th></th>
188 |                         </tr>
189 |                     </thead>
190 |                     <tbody></tbody>
191 |                 </table>
192 |                 <a href="#">Show All</a>
193 |             </div>
194 |             <!-- End of Recent Orders -->
195 | 
196 |         </main>
197 |         <!-- End of Main Content -->
198 | 
199 |         <!-- Right Section -->
200 |         <div class="right-section">
201 |             <div class="nav">
202 |                 <button id="menu-btn">
203 |                     <span class="material-icons-sharp">
204 |                         menu
205 |                     </span>
206 |                 </button>
207 |                 <div class="dark-mode">
208 |                     <span class="material-icons-sharp active">
209 |                         light_mode
210 |                     </span>
211 |                     <span class="material-icons-sharp">
212 |                         dark_mode
213 |                     </span>
214 |                 </div>
215 | 
216 |                 <div class="profile">
217 |                     <div class="info">
218 |                         <p>Hey, <b>Reza</b></p>
219 |                         <small class="text-muted">Admin</small>
220 |                     </div>
221 |                     <div class="profile-photo">
222 |                         <img src="profile-1.jpg">
223 |                     </div>
224 |                 </div>
225 | 
226 |             </div>
227 |             <!-- End of Nav -->
228 | 
229 |             <div class="user-profile">
230 |                 <div class="logo">
231 |                     <img src="logo.png">
232 |                     <h2>AsmrProg</h2>
233 |                     <p>Fullstack Web Developer</p>
234 |                 </div>
235 |             </div>
236 | 
237 |             <div class="reminders">
238 |                 <div class="header">
239 |                     <h2>Reminders</h2>
240 |                     <span class="material-icons-sharp">
241 |                         notifications_none
242 |                     </span>
243 |                 </div>
244 | 
245 |                 <div class="notification">
246 |                     <div class="icon">
247 |                         <span class="material-icons-sharp">
248 |                             volume_up
249 |                         </span>
250 |                     </div>
251 |                     <div class="content">
252 |                         <div class="info">
253 |                             <h3>Workshop</h3>
254 |                             <small class="text_muted">
255 |                                 08:00 AM - 12:00 PM
256 |                             </small>
257 |                         </div>
258 |                         <span class="material-icons-sharp">
259 |                             more_vert
260 |                         </span>
261 |                     </div>
262 |                 </div>
263 | 
264 |                 <div class="notification deactive">
265 |                     <div class="icon">
266 |                         <span class="material-icons-sharp">
267 |                             edit
268 |                         </span>
269 |                     </div>
270 |                     <div class="content">
271 |                         <div class="info">
272 |                             <h3>Workshop</h3>
273 |                             <small class="text_muted">
274 |                                 08:00 AM - 12:00 PM
275 |                             </small>
276 |                         </div>
277 |                         <span class="material-icons-sharp">
278 |                             more_vert
279 |                         </span>
280 |                     </div>
281 |                 </div>
282 | 
283 |                 <div class="notification add-reminder">
284 |                     <div>
285 |                         <span class="material-icons-sharp">
286 |                             add
287 |                         </span>
288 |                         <h3>Add Reminder</h3>
289 |                     </div>
290 |                 </div>
291 | 
292 |             </div>
293 | 
294 |         </div>
295 | 
296 | 
297 |     </div>
298 | 
299 |     <script src="orders.js"></script>
300 |     <script src="index.js"></script>
301 | </body>
302 | 
303 | </html>
304 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | a{
 11 |     text-decoration: none;
 12 |     color: #f1f3f2;
 13 |     font-size: 14px;
 14 | }
 15 | 
 16 | canvas{
 17 |     width: 100% !important;
 18 | }
 19 | 
 20 | img{
 21 |     object-fit: cover;
 22 | }
 23 | 
 24 | body{
 25 |     background: #f1f3f2;
 26 | }
 27 | 
 28 | .top-container{
 29 |     background: #031224;
 30 |     border-radius: 0 0 30px 30px;
 31 |     padding-bottom: 10px;
 32 | }
 33 | 
 34 | .top-container .nav{
 35 |     display: flex;
 36 |     align-items: center;
 37 |     justify-content: space-between;
 38 |     padding: 20px 20px 14px;
 39 |     border-bottom: 2px solid #1e293b;
 40 | }
 41 | 
 42 | .top-container .nav .logo{
 43 |     display: flex;
 44 |     align-items: center;
 45 |     gap: 6px;
 46 | }
 47 | 
 48 | .top-container .nav .logo i{
 49 |     color: #f1f3f2;
 50 |     font-size: 24px;
 51 | }
 52 | 
 53 | .top-container .nav .logo a{
 54 |     font-size: 16px;
 55 | }
 56 | 
 57 | .top-container .nav .nav-links{
 58 |     display: flex;
 59 |     gap: 20px;
 60 | }
 61 | 
 62 | .top-container .nav .nav-links a{
 63 |     color: #ccc;
 64 |     transition: all 0.3s ease;
 65 | }
 66 | 
 67 | .top-container .nav .nav-links a:hover{
 68 |     color: #fff;
 69 | }
 70 | 
 71 | .top-container .nav .right-section{
 72 |     display: flex;
 73 |     align-items: center;
 74 |     gap: 10px;
 75 | }
 76 | 
 77 | .top-container .nav .right-section > i{
 78 |     color: #f1f3f2;
 79 |     background: #1e293b;
 80 |     padding: 12px;
 81 |     border-radius: 50%;
 82 |     cursor: pointer;
 83 | }
 84 | 
 85 | .top-container .nav .right-section .profile{
 86 |     display: flex;
 87 |     align-items: center;
 88 |     background: #1e293b;
 89 |     padding: 0 10px;
 90 |     border-radius: 50px;
 91 |     gap: 10px;
 92 | }
 93 | 
 94 | .top-container .nav .right-section .profile .info{
 95 |     display: flex;
 96 |     align-items: center;
 97 |     gap: 10px;
 98 | }
 99 | 
100 | .top-container .nav .right-section .profile .info img{
101 |     width: 32px;
102 |     height: 32px;
103 |     border-radius: 50%;
104 |     border: 1px solid #f1f3f2;
105 | }
106 | 
107 | .top-container .nav .right-section .profile .info a{
108 |     font-size: 13px;
109 | }
110 | 
111 | .top-container .nav .right-section .profile .info p{
112 |     font-size: 13px;
113 |     color: #ccc;
114 | }
115 | 
116 | .top-container .nav .right-section .profile > i{
117 |     color: #f1f3f2;
118 |     font-size: 22px;
119 |     cursor: pointer;
120 | }
121 | 
122 | .top-container .status{
123 |     padding: 20px 20px 10px;
124 | }
125 | 
126 | .top-container .status .header{
127 |     display: flex;
128 |     align-items: center;
129 |     width: 100%;
130 |     margin-bottom: 20px;
131 | }
132 | 
133 | .top-container .status .header h4{
134 |     color: #f1f3f2;
135 |     font-weight: 500;
136 | }
137 | 
138 | .top-container .status .header h4#big{
139 |     flex: 3;
140 | }
141 | 
142 | .top-container .status .header h4#small{
143 |     flex: 1;
144 |     padding-left: 90px;
145 | }
146 | 
147 | .top-container .status .items-list{
148 |     display: flex;
149 |     align-items: center;
150 |     gap: 14px;
151 | }
152 | 
153 | .top-container .status .items-list .item{
154 |     background: #e0f2fe;
155 |     width: 25%;
156 |     padding: 20px;
157 |     border-radius: 18px;
158 | }
159 | 
160 | .top-container .status .items-list .item:nth-child(2){
161 |     background: #fffbeb;
162 | }
163 | 
164 | .top-container .status .items-list .item:nth-child(3){
165 |     background: #bfdbfe;
166 | }
167 | 
168 | .top-container .status .items-list .item:nth-child(4){
169 |     background: #031224;
170 |     padding: 10px;
171 | }
172 | 
173 | .top-container .status .items-list .item .info{
174 |     display: flex;
175 |     align-items: flex-start;
176 |     justify-content: space-between;
177 |     margin-bottom: 40px;
178 | }
179 | 
180 | .top-container .status .items-list .item .info h5{
181 |     font-size: 16px;
182 |     font-weight: 600;
183 |     margin-bottom: 10px;
184 | }
185 | 
186 | .top-container .status .items-list .item .info p{
187 |     font-size: 12px;
188 |     font-weight: 500;
189 | }
190 | 
191 | .top-container .status .items-list .item .info > i{
192 |     font-size: 20px;
193 |     padding: 10px;
194 |     background: #031224;
195 |     color: #f1f3f2;
196 |     border-radius: 50%;
197 | }
198 | 
199 | .top-container .status .items-list .item .progress{
200 |     position: relative;
201 |     height: 10px;
202 |     background: #b7c0cd;
203 |     border-radius: 10px;
204 | }
205 | 
206 | .top-container .status .items-list .item .progress .bar{
207 |     width: 92%;
208 |     height: 10px;
209 |     background: #031224;
210 |     border-radius: 10px;
211 | }
212 | 
213 | .top-container .status .items-list .item .progress::before{
214 |     content: "92%";
215 |     position: absolute;
216 |     top: -40px;
217 |     right: 0;
218 |     font-size: 22px;
219 |     font-weight: 600;
220 | }
221 | 
222 | .top-container .status .items-list .item:nth-child(2) .progress{
223 |     background: #d6d3d1;
224 | }
225 | 
226 | .top-container .status .items-list .item:nth-child(2) .progress .bar{
227 |     width: 65%;
228 | }
229 | 
230 | .top-container .status .items-list .item:nth-child(2) .progress::before{
231 |     content: "65%";
232 | }
233 | 
234 | 
235 | .top-container .status .items-list .item:nth-child(3) .progress{
236 |     background: #94a3b8;
237 | }
238 | 
239 | .top-container .status .items-list .item:nth-child(3) .progress .bar{
240 |     width: 80%;
241 | }
242 | 
243 | .top-container .status .items-list .item:nth-child(3) .progress::before{
244 |     content: "80%";
245 | }
246 | 
247 | .bottom-container{
248 |     display: flex;
249 |     gap: 20px;
250 |     padding: 30px;
251 | }
252 | 
253 | .bottom-container .prog-status,
254 | .bottom-container .popular,
255 | .bottom-container .upcoming{
256 |     background: #fefefe;
257 |     padding: 20px;
258 |     border-radius: 24px;
259 | }
260 | 
261 | .bottom-container .prog-status{
262 |     width: 50%;
263 | }
264 | 
265 | .bottom-container .prog-status .header,
266 | .bottom-container .popular .header,
267 | .bottom-container .upcoming .header{
268 |     display: flex;
269 |     align-items: center;
270 |     justify-content: space-between;
271 |     margin-bottom: 20px;
272 | }
273 | 
274 | .bottom-container .prog-status .header h4,
275 | .bottom-container .popular .header h4,
276 | .bottom-container .upcoming .header h4{
277 |     font-weight: 600;
278 | }
279 | 
280 | .bottom-container .prog-status .header .tabs{
281 |     background: #f3f3f3;
282 |     padding: 4px;
283 |     border-radius: 20px;
284 |     display: flex;
285 |     gap: 5px;
286 | }
287 | 
288 | .bottom-container .prog-status .header .tabs a{
289 |     padding: 4px 20px;
290 |     font-size: 12px;
291 |     color: #000;
292 |     border-radius: 20px;
293 |     font-weight: 600;
294 | }
295 | 
296 | .bottom-container .prog-status .header .tabs a.active{
297 |     background: #fff;
298 | }
299 | 
300 | .bottom-container .prog-status .details{
301 |     display: flex;
302 |     margin-bottom: 30px;
303 |     gap: 20px;
304 | }
305 | 
306 | .bottom-container .prog-status .details .item h2{
307 |     font-size: 30px;
308 |     font-weight: 400;
309 | }
310 | 
311 | .bottom-container .prog-status .details .item p{
312 |     font-size: 13px;
313 |     color: #9b9b9b;
314 | }
315 | 
316 | .bottom-container .prog-status .details .separator{
317 |     width: 2px;
318 |     height: 70px;
319 |     background: #f3f3f3;
320 | }
321 | 
322 | .bottom-container .popular{
323 |     width: 25%;
324 | }
325 | 
326 | .bottom-container .popular .header,
327 | .bottom-container .upcoming .header{
328 |     margin-bottom: 40px;
329 | }
330 | 
331 | .bottom-container .popular .header a,
332 | .bottom-container .upcoming .header a{
333 |     font-size: 12px;
334 |     color: #000;
335 |     font-weight: 600;
336 |     padding: 4px 8px;
337 |     background: #f3f3f3;
338 |     border-radius: 20px;
339 | }
340 | 
341 | .bottom-container .popular > img{
342 |     width: 100%;
343 |     aspect-ratio: 16/9;
344 |     border-radius: 20px;
345 |     margin-bottom: 20px;
346 | }
347 | 
348 | .bottom-container .popular .audio{
349 |     display: flex;
350 |     align-items: center;
351 |     gap: 10px;
352 |     margin-bottom: 20px;
353 | }
354 | 
355 | .bottom-container .popular .audio i{
356 |     font-size: 26px;
357 |     background: #eff6ff;
358 |     padding: 6px;
359 |     border-radius: 50%;
360 | }
361 | 
362 | .bottom-container .popular .audio a{
363 |     font-size: 15px;
364 |     font-weight: 600;
365 |     color: #000;
366 |     line-height: 18px;
367 | }
368 | 
369 | .bottom-container .popular > p{
370 |     font-size: 14px;
371 |     font-weight: 500;
372 |     margin-bottom: 50px;
373 | }
374 | 
375 | .bottom-container .popular .listen{
376 |     display: flex;
377 |     align-items: center;
378 |     justify-content: space-between;
379 | }
380 | 
381 | .bottom-container .popular .listen .author{
382 |     padding: 6px 10px;
383 |     background: #f3f3f3;
384 |     display: flex;
385 |     align-items: center;
386 |     gap: 10px;
387 |     border-radius: 10px;
388 | }
389 | 
390 | .bottom-container .popular .listen .author img{
391 |     width: 40px;
392 |     height: 40px;
393 |     border-radius: 50%;
394 | }
395 | 
396 | .bottom-container .popular .listen .author a{
397 |     font-size: 14px;
398 |     color: #000;
399 | }
400 | 
401 | .bottom-container .popular .listen .author p{
402 |     font-size: 12px;
403 |     color: #9b9b9b;
404 | }
405 | 
406 | .bottom-container .popular .listen button{
407 |     border: none;
408 |     color: #fff;
409 |     background: #031224;
410 |     padding: 6px 14px;
411 |     border-radius: 10px;
412 |     display: flex;
413 |     align-items: center;
414 |     gap: 6px;
415 |     cursor: pointer;
416 | }
417 | 
418 | .bottom-container .popular .listen button i{
419 |     font-size: 16px;
420 | }
421 | 
422 | .bottom-container .upcoming{
423 |     width: 25%;
424 | }
425 | 
426 | .bottom-container .upcoming .dates{
427 |     display: flex;
428 |     justify-content: space-between;
429 |     margin-bottom: 40px;
430 | }
431 | 
432 | .bottom-container .upcoming .dates .item{
433 |     display: flex;
434 |     flex-direction: column;
435 |     align-items: center;
436 |     gap: 6px;
437 | }
438 | 
439 | .bottom-container .upcoming .dates .item h5{
440 |     font-weight: 600;
441 | }
442 | 
443 | .bottom-container .upcoming .dates .item a{
444 |     color: #000;
445 |     font-size: 13px;
446 |     padding: 5px 9px;
447 |     border-radius: 50%;
448 |     font-weight: 600;
449 |     transition: all 0.3s ease;
450 | }
451 | 
452 | .bottom-container .upcoming .dates .item.active a,
453 | .bottom-container .upcoming .dates .item a:hover{
454 |     color: #fff;
455 |     background: #031224;
456 | }
457 | 
458 | .bottom-container .upcoming .events{
459 |     display: flex;
460 |     flex-direction: column;
461 |     gap: 10px;
462 | }
463 | 
464 | .bottom-container .upcoming .events .item{
465 |     display: flex;
466 |     align-items: center;
467 |     justify-content: space-between;
468 |     background: #eff6ff;
469 |     padding: 10px;
470 |     border-radius: 10px;
471 | }
472 | 
473 | .bottom-container .upcoming .events .item > i{
474 |     cursor: pointer;
475 | }
476 | 
477 | .bottom-container .upcoming .events .item > div{
478 |     display: flex;
479 |     align-items: center;
480 |     gap: 10px;
481 | }
482 | 
483 | .bottom-container .upcoming .events .item > div i{
484 |     font-size: 30px;
485 | }
486 | 
487 | .bottom-container .upcoming .events .item .event-info a{
488 |     font-size: 14px;
489 |     color: #000;
490 |     font-weight: 500;
491 | }
492 | 
493 | .bottom-container .upcoming .events .item .event-info p{
494 |     font-size: 13px;
495 |     color: #9b9b9b;
496 | }
497 | 
498 | @media screen and (max-width: 1300px) {
499 |     
500 |     .bottom-container .popular .audio a{
501 |         margin-bottom: 20px;
502 |         font-size: 12px;
503 |     }
504 | 
505 |     .bottom-container .popular > p{
506 |         margin-bottom: 20px;
507 |         font-size: 12px;
508 |     }
509 | 
510 |     .bottom-container .popular .listen{
511 |         flex-direction: column;
512 |         gap: 10px;
513 |     }
514 | 
515 |     .bottom-container .popular .listen .author{
516 |         width: 100%;
517 |     }
518 | 
519 |     .bottom-container .popular .listen button{
520 |         width: 100%;
521 |         justify-content: center;
522 |     }
523 | 
524 |     .bottom-container .upcoming .events .item{
525 |         padding: 6px 10px;
526 |     }
527 | 
528 |     .bottom-container .upcoming .events .item > div i{
529 |         font-size: 20px;
530 |     }
531 | 
532 |     .bottom-container .upcoming .events .item .event-info a{
533 |         font-size: 13px;
534 |     }
535 | 
536 |     .bottom-container .upcoming .events .item .event-info p{
537 |         font-size: 12px;
538 |     }
539 | 
540 | }
541 | 
542 | @media screen and (max-width: 1080px) {
543 |     
544 |     .top-container .nav .right-section .profile{
545 |         padding: 5px;
546 |     }
547 | 
548 |     .top-container .nav .right-section .profile .info p,
549 |     .top-container .status .header h4#small{
550 |         display: none;
551 |     }
552 | 
553 |     .top-container .status .items-list{
554 |         flex-wrap: wrap;
555 |     }
556 | 
557 |     .top-container .status .items-list .item{
558 |         width: 48%;
559 |     }
560 | 
561 |     .bottom-container{
562 |         flex-wrap: wrap;
563 |     }
564 | 
565 |     .bottom-container .prog-status{
566 |         width: 100%;
567 |     }
568 | 
569 |     .bottom-container .popular,
570 |     .bottom-container .upcoming{
571 |         width: 48%;
572 |     }
573 | 
574 |     .bottom-container .popular .audio a{
575 |         font-size: 15px;
576 |     }
577 | 
578 |     .bottom-container .popular > p{
579 |         font-size: 14px;
580 |         margin-bottom: 40px;
581 |     }
582 | 
583 |     .bottom-container .popular .listen{
584 |         flex-direction: row;
585 |     }
586 | 
587 |     .bottom-container .popular .listen button{
588 |         width: 50%;
589 |     }
590 | 
591 |     .bottom-container .upcoming .events .item{
592 |         padding: 10px;
593 |     }
594 | 
595 |     .bottom-container .upcoming .events .item > div i{
596 |         font-size: 30px;
597 |     }
598 | 
599 |     .bottom-container .upcoming .events .item .event-info a{
600 |         font-size: 14px;
601 |     }
602 | 
603 | }
604 | 
605 | @media screen and (max-width: 768px) {
606 |     
607 |     .top-container .nav{
608 |         flex-direction: column;
609 |         gap: 15px;
610 |     }
611 | 
612 |     .top-container .status .items-list .item .info h5{
613 |         font-size: 15px;
614 |     }
615 | 
616 |     .bottom-container .popular,
617 |     .bottom-container .upcoming{
618 |         width: 100%;
619 |     }
620 | 
621 | }
622 | 


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


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