From 6c14d771d68188ed208a1c1b2578def756c0c3ac Mon Sep 17 00:00:00 2001 From: Mark Schill Date: Fri, 21 Nov 2025 20:44:18 -0600 Subject: [PATCH] Make footer popup the contact modal when contact link is clicked --- frontend/package-lock.json | 7 ++++ frontend/package.json | 1 + frontend/src/app/app.html | 36 ++----------------- frontend/src/app/app.ts | 6 ++-- .../contact-modal/contact-modal.html | 22 ++++++------ .../components/contact-modal/contact-modal.ts | 4 +-- .../src/app/components/footer/footer.html | 2 +- frontend/src/app/components/footer/footer.ts | 6 +++- .../app/components/price-card/price-card.html | 30 ++++++++++++++++ .../components/price-card/price-card.spec.ts | 23 ++++++++++++ .../app/components/price-card/price-card.ts | 13 +++++++ 11 files changed, 100 insertions(+), 50 deletions(-) create mode 100644 frontend/src/app/components/price-card/price-card.html create mode 100644 frontend/src/app/components/price-card/price-card.spec.ts create mode 100644 frontend/src/app/components/price-card/price-card.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 20ed118..f0a1eb0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@hugeicons/core-free-icons": "^2.0.0", "@tailwindcss/postcss": "^4.1.17", "postcss": "^8.5.6", "rxjs": "~7.8.0", @@ -1356,6 +1357,12 @@ "node": ">=18" } }, + "node_modules/@hugeicons/core-free-icons": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@hugeicons/core-free-icons/-/core-free-icons-2.0.0.tgz", + "integrity": "sha512-OSfv5k0iB0yG61dcfK7jcf00AIK8EXyQOgtcNJzSBFvm88n9VOelkxihZHJnNwDUFpO/jZI3vZSVp6i1dmRvJQ==", + "license": "MIT" + }, "node_modules/@inquirer/ansi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-1.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index e21c412..9949e50 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@hugeicons/core-free-icons": "^2.0.0", "@tailwindcss/postcss": "^4.1.17", "postcss": "^8.5.6", "rxjs": "~7.8.0", diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html index c4b8b19..9ae70bb 100644 --- a/frontend/src/app/app.html +++ b/frontend/src/app/app.html @@ -66,37 +66,7 @@
-
-
- Most Popular -
-
-

{{ plan.name }}

-
{{ plan.price }}
-
/month
-
-
-
-
{{ plan.players }}
-
-
-
{{ plan.ram }}
-
-
-
{{ plan.storage }}
-
-
-
    -
  • - - - - {{ feature }} -
    • -
-
+
- + - +
\ No newline at end of file diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts index cc4f720..6fbf1ae 100644 --- a/frontend/src/app/app.ts +++ b/frontend/src/app/app.ts @@ -1,19 +1,21 @@ import { CommonModule } from '@angular/common'; -import { Component, OnDestroy, OnInit, HostListener } from '@angular/core'; +import { Component, OnDestroy, OnInit, HostListener, signal } from '@angular/core'; import { Navigation } from './components/navigation/navigation'; import { Feature } from './interfaces/feature'; import { Plan } from './interfaces/plan'; import { Stat } from './interfaces/stat'; import { Footer } from './components/footer/footer'; import { ContactModal } from './components/contact-modal/contact-modal'; +import { PriceCard } from './components/price-card/price-card'; @Component({ selector: 'app-root', - imports: [CommonModule, Navigation, Footer, ContactModal], + imports: [CommonModule, Navigation, Footer, ContactModal, PriceCard], templateUrl: './app.html', styleUrl: './app.css' }) export class App implements OnInit, OnDestroy { + contactOpen = signal(false); mobileMenuOpen = false; scrolled = false; diff --git a/frontend/src/app/components/contact-modal/contact-modal.html b/frontend/src/app/components/contact-modal/contact-modal.html index daf5632..57c7501 100644 --- a/frontend/src/app/components/contact-modal/contact-modal.html +++ b/frontend/src/app/components/contact-modal/contact-modal.html @@ -1,13 +1,13 @@ -
+
- -

+

Get In Touch

@@ -20,7 +20,7 @@ Name

@@ -29,7 +29,7 @@ Email
@@ -38,15 +38,15 @@ Message
diff --git a/frontend/src/app/components/contact-modal/contact-modal.ts b/frontend/src/app/components/contact-modal/contact-modal.ts index 93d1014..9837026 100644 --- a/frontend/src/app/components/contact-modal/contact-modal.ts +++ b/frontend/src/app/components/contact-modal/contact-modal.ts @@ -8,7 +8,7 @@ import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angula styles: ``, }) export class ContactModal { - open = model(false); + open = model.required(); contactForm = new FormGroup({ name: new FormControl(''), @@ -17,7 +17,7 @@ export class ContactModal { }, { validators: Validators.required }) toggleOpen() { - this.open.update(value => !value); + this.open.update(prev => !prev); } handleSubmit() { diff --git a/frontend/src/app/components/footer/footer.html b/frontend/src/app/components/footer/footer.html index 9b00cec..551328b 100644 --- a/frontend/src/app/components/footer/footer.html +++ b/frontend/src/app/components/footer/footer.html @@ -11,7 +11,7 @@
Terms Privacy - Contact + Contact
\ No newline at end of file diff --git a/frontend/src/app/components/footer/footer.ts b/frontend/src/app/components/footer/footer.ts index 61dbaee..9ec4365 100644 --- a/frontend/src/app/components/footer/footer.ts +++ b/frontend/src/app/components/footer/footer.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, model } from '@angular/core'; @Component({ selector: 'app-footer', @@ -7,5 +7,9 @@ import { Component } from '@angular/core'; styles: ``, }) export class Footer { + contactOpen = model.required(); + toggleContactModal() { + this.contactOpen.update(prev => !prev); + } } diff --git a/frontend/src/app/components/price-card/price-card.html b/frontend/src/app/components/price-card/price-card.html new file mode 100644 index 0000000..72d4bfd --- /dev/null +++ b/frontend/src/app/components/price-card/price-card.html @@ -0,0 +1,30 @@ +
+
+ Most Popular +
+
+

{{ plan().name }}

+
{{ plan().price }}
+
/month
+
+
+
+
{{ plan().players }}
+
+
+
{{ plan().ram }}
+
+
+
{{ plan().storage }}
+
+
+
    +
  • + + + + {{ feature }} +
    • +
+
\ No newline at end of file diff --git a/frontend/src/app/components/price-card/price-card.spec.ts b/frontend/src/app/components/price-card/price-card.spec.ts new file mode 100644 index 0000000..7c1b89e --- /dev/null +++ b/frontend/src/app/components/price-card/price-card.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PriceCard } from './price-card'; + +describe('PriceCard', () => { + let component: PriceCard; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PriceCard] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PriceCard); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/price-card/price-card.ts b/frontend/src/app/components/price-card/price-card.ts new file mode 100644 index 0000000..0ab7d85 --- /dev/null +++ b/frontend/src/app/components/price-card/price-card.ts @@ -0,0 +1,13 @@ +import { Component, input } from '@angular/core'; +import { Plan } from '../../interfaces/plan'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-price-card', + imports: [CommonModule], + templateUrl: './price-card.html', + styles: ``, +}) +export class PriceCard { + plan = input.required(); +}