Add rules page and enhance home slider functionality

Introduced a new "Rules" component with its routing, templates, and styles, outlining server rules. Enhanced the home slider with navigation dots, updated click events, and improved styling for active/inactive indicators. Also modified the header component to support dynamic height styling.

frontend/src/app/home/home.component.html

@@ -112,13 +112,17 @@
         <div class="sliderWrapper">
           <div class="sliderContent">
             <div class="indexSlider">
-              <div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
-              <div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
+              <div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
+              <div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
               <div class="display">
                 <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
               </div>
             </div>
-            <!-- dots/indicators controls here from js-->
+            <div class="dots">
+              <ng-container *ngFor="let slide of getSlideIndices();">
+                <span class="dot" (click)="setSlide(slide)" [ngClass]="getDotClass(slide)"></span>
+              </ng-container>
+            </div>
           </div>
         </div>
       </div>

frontend/src/app/home/home.component.scss

@@ -257,6 +257,14 @@ main .container {
   transform: scale(1.2);
 }
 
+.active-dot {
+  background-color: var(--link-color);
+}
+
+.inactive-dot {
+  background-color: rgba(0, 0, 0, 0);
+}
+
 // Different resolution changes
 @media (max-width: 1150px) {
   .container {

frontend/src/app/home/home.component.ts

@@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
     return this.slides[this.slideIndex];
   }
 
-  public previousSlide() {
+  public previousSlide(): void {
     if (this.slideIndex > 0) {
       this.slideIndex--;
     } else {
@@ -37,14 +37,26 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  public nextSlide() {
+  public nextSlide(): void {
     this.slideIndex = (this.slideIndex + 1) % this.slides.length;
   }
 
-  public copyToClipboard(text: string) {
+  public copyToClipboard(text: string): void {
     navigator.clipboard.writeText(text);
   }
 
+  public getSlideIndices(): number[] {
+    return Array.from({length: this.slides.length}, (_, i) => i);
+  }
+
+  public setSlide(slide: number): void {
+    this.slideIndex = slide;
+  }
+
+  public getDotClass(slide: number): string {
+    return slide == this.slideIndex ? 'active-dot' : 'inactive-dot';
+  }
+
   scrollToSection(): void {
     const element = document.getElementById('scrollingpoint');
     if (element) {