From 2eafef1371f108d8aec62a7feda4daf009ce890e Mon Sep 17 00:00:00 2001
From: Maxence <maxence.jouannet@etu.uca.fr>
Date: Wed, 28 May 2025 13:46:32 +0200
Subject: [PATCH] starting intro

---
 angular.json                                 |  5 ++-
 package-lock.json                            | 14 +++++++
 package.json                                 |  2 +
 src/app/services/intro/intro.service.spec.ts | 16 ++++++++
 src/app/services/intro/intro.service.ts      | 41 ++++++++++++++++++++
 src/styles.css                               | 29 ++++++++++++++
 6 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/app/services/intro/intro.service.spec.ts
 create mode 100644 src/app/services/intro/intro.service.ts

diff --git a/angular.json b/angular.json
index 9477cd0..dbe8614 100644
--- a/angular.json
+++ b/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": {
diff --git a/package-lock.json b/package-lock.json
index 853e7ea..d24c0f0 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 57ab6bb..7b7c5bf 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/services/intro/intro.service.spec.ts b/src/app/services/intro/intro.service.spec.ts
new file mode 100644
index 0000000..8b69b81
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/services/intro/intro.service.ts b/src/app/services/intro/intro.service.ts
new file mode 100644
index 0000000..d4d8ded
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/src/styles.css b/src/styles.css
index e5453bc..aa5833a 100644
--- a/src/styles.css
+++ b/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;
+}
+ */
+
+ 
\ No newline at end of file