docs: Update website docs to include star graph

Author: Kkkermit

docs/css/styles.css

@@ -286,6 +286,36 @@ body {
 	color: #333333;
 }
 
+.light-mode .star-history-container {
+	background-color: #f3f4f6;
+}
+
+.light-mode .star-history-container h3 {
+	color: #333333;
+}
+
+.star-history-chart {
+	overflow: hidden;
+	border-radius: 8px;
+	transition: transform 0.3s ease;
+	max-width: 100%;
+}
+
+.star-history-chart:hover {
+	transform: scale(1.02);
+}
+
+.star-history-chart img {
+	max-width: 100%;
+	display: block;
+}
+
+@media (max-width: 768px) {
+	.star-history-chart img {
+		width: 100%;
+	}
+}
+
 @media (max-width: 1280px) {
 	.main-content {
 		padding: 1.5rem;
@@ -543,6 +573,10 @@ body {
 		width: 40px;
 		height: 40px;
 	}
+
+	.star-history-chart img {
+		width: 100%;
+	}
 }
 
 .mobile-menu-button {

docs/index.html

@@ -1005,6 +1005,20 @@ <h3 class="text-xl font-bold mb-2 text-white">License</h3>
 							💛
 						</p>
 					</div>
+					
+					<div class="star-history-container mb-8 p-8 bg-dark-light rounded-lg text-center transform hover:scale-[1.01] transition-transform duration-300">
+						<h3 class="text-xl font-bold mb-4 text-white">Star History</h3>
+						<div class="star-history-chart flex justify-center">
+							<a href="https://www.star-history.com/#Kkkermit/Testify&Date" target="_blank">
+								<picture>
+									<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Kkkermit/Testify&type=Date&theme=dark" />
+									<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Kkkermit/Testify&type=Date" />
+									<img alt="Star History Chart" class="max-w-full h-auto rounded-md" src="https://api.star-history.com/svg?repos=Kkkermit/Testify&type=Date" />
+								</picture>
+							</a>
+						</div>
+					</div>
+					
 					<div
 						class="star-reminder p-8 bg-gradient-to-r from-primary-dark to-primary rounded-lg text-center shadow-lg transform hover:scale-[1.01] transition-transform duration-300"
 					>

docs/js/main.js

@@ -263,18 +263,33 @@ document.addEventListener("DOMContentLoaded", function () {
 			document.documentElement.classList.add("light-mode");
 			themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
 			localStorage.setItem("theme", "light");
+			updateStarHistoryChart('light');
 		} else {
 			document.documentElement.classList.remove("light-mode");
 			document.documentElement.classList.add("dark-mode");
 			themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
 			localStorage.setItem("theme", "dark");
+			updateStarHistoryChart('dark');
 		}
 
 		setTimeout(() => {
 			document.documentElement.style.transition = "";
 		}, 500);
 	});
 
+	function updateStarHistoryChart(theme) {
+		const starHistoryImg = document.querySelector('.star-history-chart img');
+		if (starHistoryImg) {
+			const baseUrl = 'https://api.star-history.com/svg?repos=Kkkermit/Testify&type=Date';
+			starHistoryImg.src = theme === 'light' ? 
+				`${baseUrl}` : 
+				`${baseUrl}&theme=dark`;
+		}
+	}
+
+	const currentTheme = localStorage.getItem('theme') || 'dark';
+	updateStarHistoryChart(currentTheme === 'light' ? 'light' : 'dark');
+
 	function fetchGitHubStats() {
 		const repoPath = "Kkkermit/Testify";
 		const statsContainer = document.querySelector(".stats-badges");