feat(index): add status page.

Author: Nde-Code

index.html

@@ -38,6 +38,22 @@
 			background: #4690F2;
 		}
 
+		.status-btn {
+			font-size: 20px;
+			border-radius: 50px;
+			color: white;
+			background: #8A2BE2; 
+			transition: all 0.2s ease-out 0s;
+			font-weight: bold;
+			border: 4px solid #7A1FD1;
+			padding: 15px 30px;
+			cursor: pointer;
+		}
+
+		.status-btn:hover {
+			background: #9F8FEF;
+		}
+
 	</style>
 
 	<link rel="stylesheet" href="assets/css/fontawesome.css">
@@ -169,6 +185,14 @@ <h1 class="website-main-panel-title">Bienvenue sur mon site:</h1>
 					Chargement...
 
 				</a>
+
+				<a class="status-btn" href="https://nde-status.instatus.com/" target="_blank" rel="noopener noreferrer">
+
+					<i class="fa-solid fa-gear rotate-animation"></i>
+
+					Chargement...
+
+				</a>
 
 			</div>
 
@@ -292,9 +316,21 @@ <h1 class="website-main-panel-title">Bienvenue sur mon site:</h1>
 
 		$(document).ready(function() {
 
-			if ($(window).width() <= 1024) $(".about-btn").html('<i class="fa-solid fa-user"></i>');
+			if ($(window).width() <= 1024) {
+				
+				$(".about-btn").html('<i class="fa-solid fa-user"></i>');
 
-			else $(".about-btn").html('<i class="fa-solid fa-user"></i> À propos de moi et de mes projets');
+				$(".status-btn").html('<i class="fa-solid fa-tower-broadcast"></i>');
+			
+			}
+
+			else {
+				
+				$(".about-btn").html('<i class="fa-solid fa-user"></i> À propos de moi et de mes projets');
+
+				$(".status-btn").html('<i class="fa-solid fa-tower-broadcast"></i> Voir le status de mes services');
+			
+			}
 
 			$("#get-my-age").text(getAge("2004/09/11"));