SAE3A_MemoryMap
/
front
5
0
Fork 0
Code Issues 6 Pull Requests Packages Projects 1 Releases Wiki Activity

front home page

Browse Source
pull/2/head
Maxence JOUANNET 5 months ago
parent 6013831002
commit 27143e646a
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File

92
src/app/components/home-page/home-page.component.html
Unescape View File

@ -1,42 +1,58 @@
<img src="/home.jpg" alt="image carte du monde">
<hr class="h-3 bg-yellow-50 border-0 brown">
<div style="padding: 20px;">
<div class="max-w-screen-xl p-6 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" >
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Bienvenue sur Memory Map</h5>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Plongez dans un voyage interactif à travers vos souvenirs avec <strong>Memory Map</strong>, l'application qui transforme vos aventures en une carte unique et personnalisée.
Avec notre outil intuitif, vous pouvez placer des "pins" sur une carte mondiale pour marquer les lieux que vous avez visités ou que vous rêvez de découvrir.
</p>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis identifiés pour revivre chaque moment important.
Memory Map ne se limite pas à capturer vos souvenirs : elle vous invite également à explorer et à découvrir, grâce à un système de quêtes et de défis conçus pour stimuler votre curiosité et enrichir votre carte de nouveaux horizons.
</p>
<a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Commencez votre aventure
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</div>
<div style="padding: 20px;">
<div class="max-w-screen-xl p-6 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" >
<img src="/home.jpg" alt="image carte du monde" style="width: 100%">
<hr class="h-3 bg-yellow-50 border-0 brown">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">L'équipe Memory</h5>
<div style="display: flex; gap: 20px; padding: 20px; justify-content: center; align-items: stretch;">
<section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
<div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<div>
<img src="/logo.png" alt="Équipe Memory sombre" >
</div>
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
Bienvenue sur Memory Map
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Plongez dans un voyage interactif à travers vos souvenirs avec
<strong>Memory Map</strong>, l'application qui transforme vos aventures
en une carte unique et personnalisée.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis
identifiés pour revivre chaque moment important.
</p>
<button routerLink="/map" class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">
Commencez votre aventure
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
</section>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Toute l'équipe de <strong>Memory</strong> est fière de vous présenter <strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux.
Ce projet est le fruit de nombreuses heures de réflexion, de travail collaboratif, et de l'envie de créer quelque chose de véritablement unique pour tous les aventuriers et rêveurs.
</p>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les magnifiques cartes que vous allez créer !
</p>
<p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
</p>
</div>
<section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
<div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<div class="mt-4 md:mt-0" >
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
L'équipe Memory
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Toute l'équipe de <strong>Memory</strong> est fière de vous présenter
<strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre
de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux.
</p>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les
magnifiques cartes que vous allez créer !
</p>
<p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
</p>
</div>
<div>
<img src="/logo.png" alt="Équipe Memory sombre" >
</div>
</div>
</section>
</div>

3
src/app/components/home-page/home-page.component.ts
Unescape View File

@ -1,9 +1,10 @@
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-home-page',
imports: [],
imports: [RouterLink],
templateUrl: './home-page.component.html',
styleUrl: './home-page.component.css'
})

Write Preview
Loading…
Cancel
Save