diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html index e19e4bd..1212ef8 100644 --- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html +++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html @@ -1,6 +1,6 @@
diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss index 585ef17..e62e1dc 100644 --- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss +++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss @@ -44,5 +44,107 @@ line-height: 24px; background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); - +} + +/* Privacy Policy Popup Styles */ +.privacy-policy-popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + + .popup-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + cursor: pointer; + } + + .popup-content { + position: relative; + width: 90%; + max-width: 600px; + max-height: 80vh; + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + z-index: 1001; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .close-button { + position: absolute; + top: 10px; + right: 10px; + width: 30px; + height: 30px; + border-radius: 50%; + background: transparent; + border: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + font-size: 24px; + color: var(--color-text-title, #255B8E); + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } + } + + .popup-body { + padding: 30px; + overflow-y: auto; + + h2 { + color: var(--color-text-title, #255B8E); + font-family: var(--Fonts-Font-text, Barlow); + font-size: 24px; + font-weight: 600; + margin-bottom: 20px; + } + + p { + color: var(--color-text, #333); + font-family: var(--Fonts-Font-text, Barlow); + font-size: 16px; + line-height: 1.5; + margin-bottom: 15px; + } + } + + .popup-footer { + padding: 20px 30px; + border-top: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + } + + .agree-button { + padding: 12px 30px; + border-radius: 10px; + border: none; + background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%)); + color: white; + font-family: var(--Fonts-Font-text, Barlow); + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { + opacity: 0.9; + } + } } diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts index e7e3a46..8a4b53b 100644 --- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts +++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts @@ -1,14 +1,24 @@ import { Component } from '@angular/core'; -import {RouterLink} from '@angular/router'; +import { RouterLink } from '@angular/router'; +import { NgIf } from '@angular/common'; @Component({ selector: 'app-bottom-navigation', imports: [ - RouterLink + RouterLink, + NgIf ], templateUrl: './bottom-navigation.html', styleUrl: './bottom-navigation.scss' }) export class BottomNavigation { + showPrivacyPolicy = false; + togglePrivacyPolicy(): void { + this.showPrivacyPolicy = !this.showPrivacyPolicy; + } + + closePrivacyPolicy(): void { + this.showPrivacyPolicy = false; + } }