diff --git a/frontend/src/app/atomic/product-overview/product-overview.component.css b/frontend/src/app/atomic/product-overview/product-overview.component.css new file mode 100644 index 0000000..4927358 --- /dev/null +++ b/frontend/src/app/atomic/product-overview/product-overview.component.css @@ -0,0 +1,97 @@ +.container { + display: flex; + column-gap: 2rem; + row-gap: 2rem; + flex-wrap: wrap; + justify-content: space-around; + margin-top: 20px; + color: var(--primary-text-color); + max-width: 25rem; +} + +.item { + width: 25rem; + flex-shrink: 0; +} + +li > p { + margin: 0; +} + +h3 { + font-weight: 600; + font-size: 1.5rem; +} + +h2 { + font-weight: 600; + font-size: 1.2rem; +} + +h3, h2 { + margin: 0; +} + +.product-header { + display: flex; + flex-direction: row; + justify-content: space-between; + column-gap: 0.5rem; + align-items: center; +} + +.product-info { + position: relative; + cursor: pointer; +} + +.info-box { + display: none; + position: absolute; + right: 0; + top: 100%; + width: 300px; + background-color: #333; + color: var(--primary-text-color); + padding: 1rem; + border-radius: 0.5rem; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 10; + white-space: pre-line; + text-align: left; + font-size: 0.9rem; +} + +.product-info:hover .info-box { + display: block; +} + +.product { + background-color: #1a1a1a; + width: 100%; + padding-top: 0.8rem; + padding-bottom: 0.8rem; + border-radius: 0.5rem; +} + +.product-light { + background-color: rgba(132, 129, 122, 1.0); +} + +.product-standard { + background-color: rgba(33, 140, 116, 1.0); +} + +.product-premium { + background-color: rgba(34, 112, 147, 1.0); +} + +.item > ul > li { + list-style-type: none; + text-align: start; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + column-gap: 1rem; +} \ No newline at end of file diff --git a/frontend/src/app/atomic/product-overview/product-overview.component.html b/frontend/src/app/atomic/product-overview/product-overview.component.html new file mode 100644 index 0000000..e3e95b6 --- /dev/null +++ b/frontend/src/app/atomic/product-overview/product-overview.component.html @@ -0,0 +1,39 @@ +
+
+
+
+

{{ product.name }}

+

{{ product.price }} Euro / einmalig

+
+
+ + + +
+ {{ product.info }} +
+
+ + + + + + + +
+ +
+
\ No newline at end of file diff --git a/frontend/src/app/atomic/product-overview/product-overview.component.spec.ts b/frontend/src/app/atomic/product-overview/product-overview.component.spec.ts new file mode 100644 index 0000000..b81106d --- /dev/null +++ b/frontend/src/app/atomic/product-overview/product-overview.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProductOverviewComponent } from './product-overview.component'; + +describe('ProductOverviewComponent', () => { + let component: ProductOverviewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ProductOverviewComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProductOverviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/atomic/product-overview/product-overview.component.ts b/frontend/src/app/atomic/product-overview/product-overview.component.ts new file mode 100644 index 0000000..7c9be89 --- /dev/null +++ b/frontend/src/app/atomic/product-overview/product-overview.component.ts @@ -0,0 +1,36 @@ +import {Component} from '@angular/core'; +import {NgClass, NgForOf, NgIf} from "@angular/common"; + +@Component({ + selector: 'atomic-product-overview', + imports: [ + NgForOf, + NgClass, + NgIf + ], + templateUrl: './product-overview.component.html', + styleUrl: './product-overview.component.css' +}) +export class ProductOverviewComponent { + products: any[] = [ + {name: 'Light', price: 119, features: ['Abfrage bei 100 Anbietern'], info: '', class: 'product-light'}, + { + name: 'Standard', + price: 179, + features: ['Abfrage bei 300 Anbietern', 'Abfrage bei Banken'], + info: '', + class: 'product-standard' + }, + { + name: 'Premium Plus', + price: 199, + features: ['Abfrage bei 400 Anbietern', 'Abfrage bei Banken', 'Löschen von Personenbezogenen Daten', 'Löschen von E-Mail Adressen aus E-Mail Verteilern', 'MyDF Dashboard'], + info: 'Wir suchen bei über 400 Anbietern nach Anmeldungen/Konten oder Registrierungen im Auftrag der Erben von Verstorbenen.\n' + + 'Eine Übersicht über den aktuellen Stand sehen Sie in Ihrem MYDF-Dashboard.\n' + + 'Dieses listet Ihnen alle gefundenen Anbieter mit Interaktion auf.\n' + + 'Per Klick einfach und übersichtlich Spuren löschen.\n' + + 'KEINE WERBUNG mehr nach Jahren. KEINE STÖRUNG.' + , class: 'product-premium' + }, + ]; +}