tutorial

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -15,6 +15,7 @@ import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { PinService } from '../../services/pin/pin.service';
 import { PinMarkerComponent } from '../pin-marker/pin-marker.component';
 import { ModalService } from '../../services/modal/modal.service';
+import { IntroService } from '../../services/intro/intro.service';
 
 @Component({
   selector: 'app-leaflet-map',
@@ -43,7 +44,8 @@ export class LeafletMapComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private modalService: ModalService,
-    private mapReloadService: MapReloadService
+    private mapReloadService: MapReloadService,
+    private introService: IntroService
   ) {}
 
   ngOnInit(): void {
@@ -66,6 +68,7 @@ export class LeafletMapComponent implements OnInit {
         }
       }
     });
+    this.introService.startIntro();
   }
 
   private initializeMap(): void {

src/app/components/navbar/navbar.component.html

@@ -167,7 +167,7 @@
       <ul
         class="w-full flex p-4 flex-col lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 lg:flex-row lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700"
       >
-        <li>
+        <li id="timeline">
           <a
             routerLink="/map"
             *ngIf="!showTimeline"
@@ -181,16 +181,17 @@
             >Timeline</a
           >
         </li>
-        <li>
+        <li >
           <a
+            id="quete"
             class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
             >Quêtes</a
           >
         </li>
-        <li>
+        <li id="add">
           <app-add-pin-popup></app-add-pin-popup>
         </li>
-        <li>
+        <li id="friend">
           <app-friend-page></app-friend-page>
         </li>
       </ul>

src/app/components/navbar/navbar.component.ts

@@ -63,7 +63,7 @@ export class NavbarComponent implements OnInit {
     private route: ActivatedRoute,
     private localStorageService: LocalStorageService,
     private pinService: PinService,
-    private fb: FormBuilder
+    private fb: FormBuilder,
   ) {
     this.searchForm = this.fb.group({
       searchControl: new FormControl(''),
@@ -106,6 +106,7 @@ export class NavbarComponent implements OnInit {
       .subscribe((filteredPins) => {
         this.pinsFiltered = filteredPins;
       });
+
   }
 
   filterPins(searchTerm: string): Pin[] {

src/app/services/intro/intro.service.ts

@@ -16,7 +16,7 @@ export class IntroService {
           intro: 'Welcome to the web let me show you around!'
         },
         {
-          element: '#accueil',
+          element: '#timeline',
           intro: 'This is the logo of Memory Map.'
         },
         {
@@ -28,7 +28,7 @@ export class IntroService {
           intro: 'This button toggles the mobile navigation menu.'
         },
         {
-          element: '#amis',
+          element: '#friend',
           intro: 'Here is the main navigation menu.'
         },
       ],

src/styles.css

@@ -35,19 +35,9 @@
   }
 }
 
-/* .custom-center-tooltip {
-  position: fixed !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-  max-width: 400px;
-  background-color: white;
-  color: black;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+.custom-center-tooltip {
   z-index: 9999;
 }
- */
+