starting intro

angular.json

@@ -33,10 +33,11 @@
             "styles": [
               "src/styles.css",
               "node_modules/leaflet/dist/leaflet.css"
-            ],
+            , "node_modules/intro.js/introjs.css"],
             "scripts": [
               "node_modules/flowbite/dist/flowbite.min.js",
-              "node_modules/leaflet/dist/leaflet.js"
+              "node_modules/leaflet/dist/leaflet.js",
+              "node_modules/intro.js/intro.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -17,8 +17,10 @@
         "@angular/platform-browser-dynamic": "^19.0.0",
         "@angular/router": "^19.0.0",
         "@angular/service-worker": "^19.0.5",
+        "@types/intro.js": "^5.1.5",
         "exifr": "^7.1.3",
         "flowbite": "^2.5.2",
+        "intro.js": "^7.2.0",
         "leaflet": "^1.9.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -4642,6 +4644,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/intro.js": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@types/intro.js/-/intro.js-5.1.5.tgz",
+      "integrity": "sha512-TT1d8ayz07svlBcoqh26sNpQaU6bBpdFcCC+IMZHp46NNX2mYAHAVefM3wCmQSd4UWhhObeMjFByw2IaPKOXlw==",
+      "license": "MIT"
+    },
     "node_modules/@types/jasmine": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.5.tgz",
@@ -7921,6 +7929,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/intro.js": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-7.2.0.tgz",
+      "integrity": "sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==",
+      "license": "AGPL-3.0"
+    },
     "node_modules/ip-address": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",

package.json

@@ -20,8 +20,10 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@angular/service-worker": "^19.0.5",
+    "@types/intro.js": "^5.1.5",
     "exifr": "^7.1.3",
     "flowbite": "^2.5.2",
+    "intro.js": "^7.2.0",
     "leaflet": "^1.9.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IntroService } from './intro.service';
+
+describe('IntroService', () => {
+  let service: IntroService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IntroService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import introJs from 'intro.js';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IntroService {
+  private intro = introJs();
+
+  constructor() {}
+
+  startIntro() {
+    this.intro.setOptions({
+      steps: [
+        {
+          intro: 'Welcome to the web let me show you around!'
+        },
+        {
+          element: '#accueil',
+          intro: 'This is the logo of Memory Map.'
+        },
+        {
+          element: '#quete',
+          intro: 'Click here to open the search bar on mobile.'
+        },
+        {
+          element: '#add',
+          intro: 'This button toggles the mobile navigation menu.'
+        },
+        {
+          element: '#amis',
+          intro: 'Here is the main navigation menu.'
+        },
+      ],
+      exitOnOverlayClick: false,
+      disableInteraction: false,
+    });
+
+    this.intro.start();
+  }
+}

src/styles.css

@@ -22,3 +22,32 @@
     background-image: url(/assets/images/layers-2x.png);
   }
 }
+
+/* Fix Leaflet image paths */
+.leaflet-control-layers-toggle {
+  background-image: url(/assets/images/layers.png);
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi) {
+  .leaflet-control-layers-toggle {
+    background-image: url(/assets/images/layers-2x.png);
+  }
+}
+
+/* .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);
+  z-index: 9999;
+}
+ */
+
+