我是 JS 新手，我使用模板创建仪表板页面，当我尝试单击其他侧边栏选项卡时，页面变得清晰，当我使用图表或其他元素时，仅显示侧边栏，新选项卡中没有任何内容显示，所以告诉我问题出在哪里。
document.addEventListener('DOMContentLoaded', function() {
// Sidebar menu functionality
const sideMenu = document.querySelector('aside');
const menuBtn = document.getElementById('menu-btn');
const closeBtn = document.getElementById('close-btn');
const darkMode = document.querySelector('.dark-mode');
if (menuBtn) {
menuBtn.addEventListener('click', () => {
if (sideMenu) sideMenu.style.display = 'block';
});
}
if (closeBtn) {
closeBtn.addEventListener('click', () => {
if (sideMenu) sideMenu.style.display = 'none';
});
}
if (darkMode) {
darkMode.addEventListener('click', () => {
document.body.classList.toggle('dark-mode-variables');
const spans = darkMode.querySelectorAll('span');
spans.forEach((span, index) => {
if (index < 2) span.classList.toggle('active');
});
});
}
// Function to change content
function changeContent(tabName) {
// Hide all tab contents
var tabPanes = document.querySelectorAll('.tab-pane');
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.style.display = 'none';
});
// Show the clicked tab
var activePane = document.getElementById(tabName);
if (activePane) {
activePane.classList.add('active');
activePane.style.display = 'block';
// If it's the analytics tab and it's empty, load the content
if (tabName === 'analytics' && activePane.innerHTML.trim() === '') {
loadAnalyticsContent();
}
}
// Remove active class from all buttons
var tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => button.classList.remove('active'));
// Add active class to the clicked button
var activeButton = document.querySelector(`.tab-button[data-tab="${tabName}"]`);
if (activeButton) {
activeButton.classList.add('active');
}
}
// Tab functionality
const tabButtons = document.querySelectorAll('.sidebar a');
tabButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const tabId = this.getAttribute('data-tab');
if (tabId) {
changeContent(tabId);
}
});
});
// Function to load analytics content
function loadAnalyticsContent() {
fetch('templates/analytic.html')
.then(response => response.text())
.then(html => {
document.getElementById('analytics').innerHTML = html;
initializeAnalyticsCharts();
})
.catch(error => console.error('Error loading analytics content:', error));
}
// Chart creation functions
function createLineChart() {
const ctx = document.getElementById("linechart");
if (!ctx) return;
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgb(75,192,192)",
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
function createDoughnutChart() {
const ctx = document.getElementById("dougnutchart");
if (!ctx) return;
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Doughnut Chart Example'
}
}
}
});
}
function createBarChart(canvasId, label, data) {
const ctx = document.getElementById(canvasId);
if (!ctx) return;
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: label,
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
// Create charts
createLineChart();
createDoughnutChart();
createBarChart("barchart1", "# of Votes", [12, 19, 3, 5, 2, 3]);
createBarChart("barchart2", "Sales", [65, 59, 80, 81, 56, 55]);
// Analytics specific code
const startDateInput = document.getElementById('start-date');
const endDateInput = document.getElementById('end-date');
const applyDateRangeBtn = document.getElementById('apply-date-range');
let userActivityChart, revenueChart;
function initializeAnalytics() {
const today = new Date();
const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
startDateInput.valueAsDate = oneMonthAgo;
endDateInput.valueAsDate = today;
createUserActivityChart();
createRevenueChart();
}
function createUserActivityChart() {
const ctx = document.getElementById('user-activity-chart').getContext('2d');
userActivityChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Daily Active Users',
data: [],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
function createRevenueChart() {
const ctx = document.getElementById('revenue-chart').getContext('2d');
revenueChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Daily Revenue',
data: [],
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgb(153, 102, 255)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
return '$' + value;
}
}
}
}
}
});
}
function updateCharts(startDate, endDate) {
const dates = [];
const userActivityData = [];
const revenueData = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
dates.push(date_fns.format(currentDate, 'MMM d'));
userActivityData.push(Math.floor(Math.random() * 1000) + 500);
revenueData.push(Math.floor(Math.random() * 10000) + 5000);
currentDate = date_fns.addDays(currentDate, 1);
}
userActivityChart.data.labels = dates;
userActivityChart.data.datasets[0].data = userActivityData;
userActivityChart.update();
revenueChart.data.labels = dates;
revenueChart.data.datasets[0].data = revenueData;
revenueChart.update();
}
applyDateRangeBtn.addEventListener('click', function() {
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
updateCharts(startDate, endDate);
});
initializeAnalytics();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css">
<title>Analytical Dashboard Mica</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.29.3/date-fns.min.js"></script>
<style>
#analytics { padding: 20px; }
.chart-container { margin-top: 20px; height: 300px; }
</style>
</head>
<body>
<div class="container">
<!-- Sidebar Section -->
<aside>
<div class="toggle">
<div class="logo">
<img src="static/images/download.png">
<h2>My<span class="danger">analytics</span></h2>
</div>
<div class="close" id="close-btn">
<span class="material-icons-sharp">
close
</span>
</div>
</div>
<div class="sidebar">
<a href="#" class="tab-button active" data-tab="dashboard" onclick="changeContent('dashboard')">
<span class="material-icons-sharp">
dashboard
</span>
<h3>Dashboard</h3>
</a>
<a href="#" class="tab-button" data-tab="users" onclick="changeContent('users')">
<span class="material-icons-sharp">
person_outline
</span>
<h3>Users</h3>
</a>
<a href="#" class="tab-button" data-tab="history" onclick="changeContent('history')">
<span class="material-icons-sharp">
receipt_long
</span>
<h3>History</h3>
</a>
<a href="#" class="tab-button" data-tab="analytics" onclick="changeContent('analytics')">
<span class="material-icons-sharp">
insights
</span>
<h3>Analytics</h3>
</a>
<a href="#" class="tab-button" data-tab="message-count" onclick="changeContent('Tickets')">
<span class="material-icons-sharp">
mail_outline
</span>
<h3>Tickets</h3>
<span class="message-count">1</span>
</a>
<a href="#" class="tab-button" data-tab="inventory" onclick="changeContent('inventory')">
<span class="material-icons-sharp">
inventory
</span>
<h3>Sale List</h3>
</a>
<a href="#" class="tab-button" data-tab="reports" onclick="changeContent('Reports')">
<span class="material-icons-sharp">
report_gmailerrorred
</span>
<h3>Reports</h3>
</a>
<a href="#" class="tab-button" data-tab="settings" onclick="changeContent('settings')">
<span class="material-icons-sharp">
settings
</span>
<h3>Settings</h3>
</a>
<a href="#" class="tab-button" data-tab="new-login" onclick="changeContent('New_Login')">
<span class="material-icons-sharp">
add
</span>
<h3>New Login</h3>
</a>
<a href="#" class="tab-button" data-tab="logout" onclick="changeContent('logout')">
<span class="material-icons-sharp">
logout
</span>
<h3>Logout</h3>
</a>
</div>
</aside>
<!-- End of Sidebar Section -->
<!-- Main Content -->
<main>
<div id="dashboard" class="tab-pane active">
<h1>Dashboard</h1>
<div class="analyse">
<div class="sales">
<div class="status">
<div class="info">
<h3>Total Sales</h3>
<h1>$65,024</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>+81%</p>
</div>
</div>
</div>
</div>
<div class="visits">
<div class="status">
<div class="info">
<h3>Site Visit</h3>
<h1>24,981</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>-48%</p>
</div>
</div>
</div>
</div>
<div class="searches">
<div class="status">
<div class="info">
<h3>Searches</h3>
<h1>14,147</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>+21%</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of Analyses -->
<div class="charts">
<div class="chart-wrapper">
<canvas id="linechart"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="dougnutchart"></canvas>
</div>
</div>
<div class="charts">
<div class="chart-wrapper">
<canvas id="barchart1"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="barchart2"></canvas>
</div>
</div>
<div id="users" class="tab-pane">
<h1>Users</h1>
<!-- Users content -->
</div>
<div id="history" class="tab-pane">
<h1>History</h1>
<!-- History content -->
</div>
<div id="analytics" class="tab-pane">
<h2>Analytics Dashboard</h2>
<div id="date-range-picker">
<input type="date" id="start-date">
<input type="date" id="end-date">
<button id="apply-date-range">Apply</button>
</div>
<div class="chart-container">
<canvas id="user-activity-chart"></canvas>
</div>
<div class="chart-container">
<canvas id="revenue-chart"></canvas>
</div>
</div>
</main>
<!-- End of Main Content -->
<!-- Right Section -->
<div class="right-section">
<div class="nav">
<button id="menu-btn">
<span class="material-icons-sharp">
menu
</span>
</button>
<div class="dark-mode">
<span class="material-icons-sharp active">
light_mode
</span>
<span class="material-icons-sharp">
dark_mode
</span>
</div>
<div class="profile">
<div class="info">
<p>Hey, <b>Admin</b></p>
<small class="text-muted">Admin</small>
</div>
<div class="profile-photo">
<img src="static/images/3 (2).jpg">
</div>
</div>
</div>
<!-- End of Nav -->
<div class="user-profile">
<div class="logo">
<img src="static/images/download.png">
<h2>Khashayar</h2>
<p>Developer</p>
</div>
</div>
<div class="reminders">
<div class="header">
<h2>Reminders</h2>
<span class="material-icons-sharp">
notifications_none
</span>
</div>
<div class="notification">
<div class="icon">
<span class="material-icons-sharp">
volume_up
</span>
</div>
<div class="content">
<div class="info">
<h3>Workshop</h3>
<small class="text_muted">
08:00 AM - 12:00 PM
</small>
</div>
<span class="material-icons-sharp">
more_vert
</span>
</div>
</div>
<div class="notification deactive">
<div class="icon">
<span class="material-icons-sharp">
edit
</span>
</div>
<div class="content">
<div class="info">
<h3>Workshop</h3>
<small class="text_muted">
08:00 AM - 12:00 PM
</small>
</div>
<span class="material-icons-sharp">
more_vert
</span>
</div>
</div>
<div class="notification add-reminder">
<div>
<span class="material-icons-sharp">
add
</span>
<h3>Add Reminder</h3>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/index.js"></script>
</body>
</html>我想要一种方式，当我单击该选项卡时，我也可以在分析选项卡中看到图表
document.addEventListener('DOMContentLoaded', function() {
// Sidebar menu functionality
const sideMenu = document.querySelector('aside');
const menuBtn = document.getElementById('menu-btn');
const closeBtn = document.getElementById('close-btn');
const darkMode = document.querySelector('.dark-mode');
if (menuBtn) {
menuBtn.addEventListener('click', () => {
if (sideMenu) sideMenu.style.display = 'block';
});
}
if (closeBtn) {
closeBtn.addEventListener('click', () => {
if (sideMenu) sideMenu.style.display = 'none';
});
}
if (darkMode) {
darkMode.addEventListener('click', () => {
document.body.classList.toggle('dark-mode-variables');
const spans = darkMode.querySelectorAll('span');
spans.forEach((span, index) => {
if (index < 2) span.classList.toggle('active');
});
});
}
// Function to change content
function changeContent(tabName) {
// Hide all tab contents
var tabPanes = document.querySelectorAll('.tab-pane');
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.style.display = 'none';
});
// Show the clicked tab
var activePane = document.getElementById(tabName);
if (activePane) {
activePane.classList.add('active');
activePane.style.display = 'block';
// If it's the analytics tab and it's empty, load the content
if (tabName === 'analytics' && activePane.innerHTML.trim() === '') {
loadAnalyticsContent();
}
}
// Remove active class from all buttons
var tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => button.classList.remove('active'));
// Add active class to the clicked button
var activeButton = document.querySelector(`.tab-button[data-tab="${tabName}"]`);
if (activeButton) {
activeButton.classList.add('active');
}
}
// Tab functionality
const tabButtons = document.querySelectorAll('.sidebar a');
tabButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const tabId = this.getAttribute('data-tab');
if (tabId) {
changeContent(tabId);
}
});
});
// Function to load analytics content
function loadAnalyticsContent() {
fetch('templates/analytic.html')
.then(response => response.text())
.then(html => {
document.getElementById('analytics').innerHTML = html;
initializeAnalyticsCharts();
})
.catch(error => console.error('Error loading analytics content:', error));
}
// Chart creation functions
function createLineChart() {
const ctx = document.getElementById("linechart");
if (!ctx) return;
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgb(75,192,192)",
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
function createDoughnutChart() {
const ctx = document.getElementById("dougnutchart");
if (!ctx) return;
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Doughnut Chart Example'
}
}
}
});
}
function createBarChart(canvasId, label, data) {
const ctx = document.getElementById(canvasId);
if (!ctx) return;
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: label,
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
// Create charts
createLineChart();
createDoughnutChart();
createBarChart("barchart1", "# of Votes", [12, 19, 3, 5, 2, 3]);
createBarChart("barchart2", "Sales", [65, 59, 80, 81, 56, 55]);
// Analytics specific code
const startDateInput = document.getElementById('start-date');
const endDateInput = document.getElementById('end-date');
const applyDateRangeBtn = document.getElementById('apply-date-range');
let userActivityChart, revenueChart;
function initializeAnalytics() {
const today = new Date();
const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
startDateInput.valueAsDate = oneMonthAgo;
endDateInput.valueAsDate = today;
createUserActivityChart();
createRevenueChart();
}
function createUserActivityChart() {
const ctx = document.getElementById('user-activity-chart').getContext('2d');
userActivityChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Daily Active Users',
data: [],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
function createRevenueChart() {
const ctx = document.getElementById('revenue-chart').getContext('2d');
revenueChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Daily Revenue',
data: [],
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgb(153, 102, 255)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
return '$' + value;
}
}
}
}
}
});
}
function updateCharts(startDate, endDate) {
const dates = [];
const userActivityData = [];
const revenueData = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
dates.push(date_fns.format(currentDate, 'MMM d'));
userActivityData.push(Math.floor(Math.random() * 1000) + 500);
revenueData.push(Math.floor(Math.random() * 10000) + 5000);
currentDate = date_fns.addDays(currentDate, 1);
}
userActivityChart.data.labels = dates;
userActivityChart.data.datasets[0].data = userActivityData;
userActivityChart.update();
revenueChart.data.labels = dates;
revenueChart.data.datasets[0].data = revenueData;
revenueChart.update();
}
applyDateRangeBtn.addEventListener('click', function() {
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
updateCharts(startDate, endDate);
});
initializeAnalytics();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css">
<title>Analytical Dashboard Mica</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.29.3/date-fns.min.js"></script>
<style>
#analytics { padding: 20px; }
.chart-container { margin-top: 20px; height: 300px; }
</style>
</head>
<body>
<div class="container">
<!-- Sidebar Section -->
<aside>
<div class="toggle">
<div class="logo">
<img src="static/images/download.png">
<h2>My<span class="danger">analytics</span></h2>
</div>
<div class="close" id="close-btn">
<span class="material-icons-sharp">
close
</span>
</div>
</div>
<div class="sidebar">
<a href="#" class="tab-button active" data-tab="dashboard" onclick="changeContent('dashboard')">
<span class="material-icons-sharp">
dashboard
</span>
<h3>Dashboard</h3>
</a>
<a href="#" class="tab-button" data-tab="users" onclick="changeContent('users')">
<span class="material-icons-sharp">
person_outline
</span>
<h3>Users</h3>
</a>
<a href="#" class="tab-button" data-tab="history" onclick="changeContent('history')">
<span class="material-icons-sharp">
receipt_long
</span>
<h3>History</h3>
</a>
<a href="#" class="tab-button" data-tab="analytics" onclick="changeContent('analytics')">
<span class="material-icons-sharp">
insights
</span>
<h3>Analytics</h3>
</a>
<a href="#" class="tab-button" data-tab="message-count" onclick="changeContent('Tickets')">
<span class="material-icons-sharp">
mail_outline
</span>
<h3>Tickets</h3>
<span class="message-count">1</span>
</a>
<a href="#" class="tab-button" data-tab="inventory" onclick="changeContent('inventory')">
<span class="material-icons-sharp">
inventory
</span>
<h3>Sale List</h3>
</a>
<a href="#" class="tab-button" data-tab="reports" onclick="changeContent('Reports')">
<span class="material-icons-sharp">
report_gmailerrorred
</span>
<h3>Reports</h3>
</a>
<a href="#" class="tab-button" data-tab="settings" onclick="changeContent('settings')">
<span class="material-icons-sharp">
settings
</span>
<h3>Settings</h3>
</a>
<a href="#" class="tab-button" data-tab="new-login" onclick="changeContent('New_Login')">
<span class="material-icons-sharp">
add
</span>
<h3>New Login</h3>
</a>
<a href="#" class="tab-button" data-tab="logout" onclick="changeContent('logout')">
<span class="material-icons-sharp">
logout
</span>
<h3>Logout</h3>
</a>
</div>
</aside>
<!-- End of Sidebar Section -->
<!-- Main Content -->
<main>
<div id="dashboard" class="tab-pane active">
<h1>Dashboard</h1>
<div class="analyse">
<div class="sales">
<div class="status">
<div class="info">
<h3>Total Sales</h3>
<h1>$65,024</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>+81%</p>
</div>
</div>
</div>
</div>
<div class="visits">
<div class="status">
<div class="info">
<h3>Site Visit</h3>
<h1>24,981</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>-48%</p>
</div>
</div>
</div>
</div>
<div class="searches">
<div class="status">
<div class="info">
<h3>Searches</h3>
<h1>14,147</h1>
</div>
<div class="progresss">
<svg>
<circle cx="38" cy="38" r="36"></circle>
</svg>
<div class="percentage">
<p>+21%</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of Analyses -->
<div class="charts">
<div class="chart-wrapper">
<canvas id="linechart"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="dougnutchart"></canvas>
</div>
</div>
<div class="charts">
<div class="chart-wrapper">
<canvas id="barchart1"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="barchart2"></canvas>
</div>
</div>
<div id="users" class="tab-pane">
<h1>Users</h1>
<!-- Users content -->
</div>
<div id="history" class="tab-pane">
<h1>History</h1>
<!-- History content -->
</div>
<div id="analytics" class="tab-pane">
<h2>Analytics Dashboard</h2>
<div id="date-range-picker">
<input type="date" id="start-date">
<input type="date" id="end-date">
<button id="apply-date-range">Apply</button>
</div>
<div class="chart-container">
<canvas id="user-activity-chart"></canvas>
</div>
<div class="chart-container">
<canvas id="revenue-chart"></canvas>
</div>
</div>
</main>
<!-- End of Main Content -->
<!-- Right Section -->
<div class="right-section">
<div class="nav">
<button id="menu-btn">
<span class="material-icons-sharp">
menu
</span>
</button>
<div class="dark-mode">
<span class="material-icons-sharp active">
light_mode
</span>
<span class="material-icons-sharp">
dark_mode
</span>
</div>
<div class="profile">
<div class="info">
<p>Hey, <b>Admin</b></p>
<small class="text-muted">Admin</small>
</div>
<div class="profile-photo">
<img src="static/images/3 (2).jpg">
</div>
</div>
</div>
<!-- End of Nav -->
<div class="user-profile">
<div class="logo">
<img src="static/images/download.png">
<h2>Khashayar</h2>
<p>Developer</p>
</div>
</div>
<div class="reminders">
<div class="header">
<h2>Reminders</h2>
<span class="material-icons-sharp">
notifications_none
</span>
</div>
<div class="notification">
<div class="icon">
<span class="material-icons-sharp">
volume_up
</span>
</div>
<div class="content">
<div class="info">
<h3>Workshop</h3>
<small class="text_muted">
08:00 AM - 12:00 PM
</small>
</div>
<span class="material-icons-sharp">
more_vert
</span>
</div>
</div>
<div class="notification deactive">
<div class="icon">
<span class="material-icons-sharp">
edit
</span>
</div>
<div class="content">
<div class="info">
<h3>Workshop</h3>
<small class="text_muted">
08:00 AM - 12:00 PM
</small>
</div>
<span class="material-icons-sharp">
more_vert
</span>
</div>
</div>
<div class="notification add-reminder">
<div>
<span class="material-icons-sharp">
add
</span>
<h3>Add Reminder</h3>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/index.js"></script>
</body>
</html>