74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
100: "#C5CAE9", // Lightest shade
|
|
200: "#9FA8DA", // Lighter shade
|
|
300: "#7986CB", // Mid-light shade
|
|
400: "#3F51B5", // Base color (your original color)
|
|
500: "#3949AB", // Slightly darker shade
|
|
600: "#303F9F", // Dark shade
|
|
700: "#283593", // Very dark shade
|
|
800: "#1A237E", // Near-black shade
|
|
900: "#0D1B57", // Darkest shade (near black)
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
lucide.createIcons();
|
|
AOS.init({
|
|
once: true, // animations will occur only once on page load
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const ctx = document.getElementById("myBarChart").getContext("2d");
|
|
|
|
new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
|
datasets: [
|
|
{
|
|
label: "Dataset 1",
|
|
data: [12, 19, 3, 5, 8, 3, 7, 11, 5, 8, 13, 15],
|
|
backgroundColor: "rgba(54, 162, 235, 0.6)", // Blue
|
|
borderColor: "rgba(54, 162, 235, 1)",
|
|
borderWidth: 1,
|
|
},
|
|
{
|
|
label: "Dataset 2",
|
|
data: [7, 11, 5, 8, 13, 15, 12, 19, 3, 5, 8, 3],
|
|
backgroundColor: "rgba(255, 99, 132, 0.6)", // Red
|
|
borderColor: "rgba(255, 99, 132, 1)",
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false, // Must be false to allow height changes
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
function changeTab(index) {
|
|
let tabs = document.querySelectorAll('.tab');
|
|
let contents = document.querySelectorAll('.tab-content');
|
|
let indicator = document.querySelector('.indicator');
|
|
|
|
tabs.forEach((tab, i) => {
|
|
tab.classList.toggle('active', i === index);
|
|
contents[i].classList.toggle('active', i === index);
|
|
});
|
|
|
|
indicator.style.transform = `translateX(${index * 100}%)`;
|
|
}
|