diff --git a/Crawler/Crawler.iml b/Crawler/Crawler.iml index db1dd1c..6bfc4c4 100644 --- a/Crawler/Crawler.iml +++ b/Crawler/Crawler.iml @@ -9,6 +9,5 @@ - \ No newline at end of file diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index 15b49f4..4ffb73b 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -1,7 +1,13 @@ - -
- +
+
+ +
+
+ +
+
+ +
- diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index 0e74770..d183942 100644 --- a/Frontend/src/app/app.module.ts +++ b/Frontend/src/app/app.module.ts @@ -29,6 +29,8 @@ import {MatIconModule} from '@angular/material/icon'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatListModule} from "@angular/material/list"; import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component'; +import { HotDealsWidgetComponent } from './components/hot-deals-widget/hot-deals-widget.component'; +import { SliderForProductsComponent } from './components/slider-for-products/slider-for-products.component'; // For cookie popup @@ -85,7 +87,9 @@ const cookieConfig: NgcCookieConsentConfig = { ImprintComponent, PrivacyComponent, TopBarComponent, - BottomBarComponent + BottomBarComponent, + HotDealsWidgetComponent, + SliderForProductsComponent ], imports: [ BrowserModule, diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css new file mode 100644 index 0000000..4332ff7 --- /dev/null +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css @@ -0,0 +1,70 @@ +.hot-deal-widget-wrapper{ + width: 1640px; + height: 820px; + background-color: #f8f9fa; + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; +} + +.product-description { + /*background-color: #3480E3;*/ + height: 100%; + display: grid; + grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px; + grid-template-rows: repeat(5, 1fr); +} + +.product-image { + +} + +#hot-deals{ + /*background-color: #E53167;*/ + justify-self: center; + align-self: center; + grid-column: 3/10; + grid-row: 1/2; +} + +#product-name { + justify-self: center; + align-self: center; + grid-column: 3/10; + grid-row: 2/3; + /*background-color: #E53167;*/ +} + +#product-name > p { + font-size: 65px; +} + +#sales { + justify-self: center; + align-self: center; + grid-column: 3/10; + grid-row: 3/4; + /*background-color: #E53167;*/ +} + +#futher-informations { + justify-self: center; + align-self: center; + grid-column: 3/10; + grid-row: 4/5; + /*background-color: #E53167;*/ +} + +#points { + justify-self: center; + align-self: start; + grid-column: 3/10; + grid-row: 5/6; + /*background-color: #E53167;*/ +} + +.product-image { + display: grid; + justify-content: center; +} + diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html new file mode 100644 index 0000000..ae2d98f --- /dev/null +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html @@ -0,0 +1,23 @@ +
+
+
+

HOT DEALS

+
+
+

Neues Apple iPhone 12 Pro
(512 GB) - Graphit

+
+
+ SPARE BIS ZU 7%! +
+
+ Weitere Informationen +
+
+ points +
+
+
+ +
+
+ diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.spec.ts b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.spec.ts new file mode 100644 index 0000000..9826e63 --- /dev/null +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HotDealsWidgetComponent } from './hot-deals-widget.component'; + +describe('HotDealsWidgetComponent', () => { + let component: HotDealsWidgetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HotDealsWidgetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HotDealsWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts new file mode 100644 index 0000000..f41d5da --- /dev/null +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-hot-deals-widget', + templateUrl: './hot-deals-widget.component.html', + styleUrls: ['./hot-deals-widget.component.css'] +}) +export class HotDealsWidgetComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/Frontend/src/app/components/slider-for-products/slider-for-products.component.css b/Frontend/src/app/components/slider-for-products/slider-for-products.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Frontend/src/app/components/slider-for-products/slider-for-products.component.html b/Frontend/src/app/components/slider-for-products/slider-for-products.component.html new file mode 100644 index 0000000..be93627 --- /dev/null +++ b/Frontend/src/app/components/slider-for-products/slider-for-products.component.html @@ -0,0 +1 @@ +

slider-for-products works!

diff --git a/Frontend/src/app/components/slider-for-products/slider-for-products.component.spec.ts b/Frontend/src/app/components/slider-for-products/slider-for-products.component.spec.ts new file mode 100644 index 0000000..f051463 --- /dev/null +++ b/Frontend/src/app/components/slider-for-products/slider-for-products.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SliderForProductsComponent } from './slider-for-products.component'; + +describe('SliderForProductsComponent', () => { + let component: SliderForProductsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SliderForProductsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SliderForProductsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/slider-for-products/slider-for-products.component.ts b/Frontend/src/app/components/slider-for-products/slider-for-products.component.ts new file mode 100644 index 0000000..373a624 --- /dev/null +++ b/Frontend/src/app/components/slider-for-products/slider-for-products.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-slider-for-products', + templateUrl: './slider-for-products.component.html', + styleUrls: ['./slider-for-products.component.css'] +}) +export class SliderForProductsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/Frontend/src/app/components/top-bar/top-bar.component.css b/Frontend/src/app/components/top-bar/top-bar.component.css index 8b13789..74e9f16 100644 --- a/Frontend/src/app/components/top-bar/top-bar.component.css +++ b/Frontend/src/app/components/top-bar/top-bar.component.css @@ -1 +1,54 @@ +.top-bar-wrapper { + display: grid; + grid-template-columns: 200px 360px 820px 20px 250px; + grid-template-rows: 40px; + grid-column-gap: 0px; + grid-row-gap: 0px; + align-items: center; +} +.top-logo { + grid-area: 1/1; +} + +#better { + font-size: 28px; + font-weight: bold; + color: #3480E3; +} + +#zon { + font-size: 28px; + font-weight: bold; + color: #E53167; +} + +.search-button { + /*background-color: #E53167;*/ +} + +.sign-up { + /*background-color: #E53167;*/ + margin-left: 50px; + margin-right: 25px; +} + +.login { + margin-right: 25px; +} + +#signin { + border-radius: 25px; + background-color: #E53167; +} + +._links > a { + /*background-color: #E53167;*/ + margin-left: 10px; + margin-right: 10px; +} + +._signing_links > a { + /*background-color: #E53167;*/ + margin-left: 50px; +} diff --git a/Frontend/src/app/components/top-bar/top-bar.component.html b/Frontend/src/app/components/top-bar/top-bar.component.html index c67d5cf..921a3cf 100644 --- a/Frontend/src/app/components/top-bar/top-bar.component.html +++ b/Frontend/src/app/components/top-bar/top-bar.component.html @@ -1,4 +1,26 @@ - - Betterzon Logo - - shopping_cartCheckout +
+
+ BETTERZON +
+
+ +
+
+ +
+
+ + Sarch button + +
+
+ +
+
diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.html b/Frontend/src/app/pages/landingpage/landingpage.component.html index feb0659..cdd0b44 100644 --- a/Frontend/src/app/pages/landingpage/landingpage.component.html +++ b/Frontend/src/app/pages/landingpage/landingpage.component.html @@ -1,4 +1,6 @@ -
+ + + diff --git a/Frontend/src/assets/images/iphone-12-pro-silver-hero.png b/Frontend/src/assets/images/iphone-12-pro-silver-hero.png new file mode 100644 index 0000000..8f3aae8 Binary files /dev/null and b/Frontend/src/assets/images/iphone-12-pro-silver-hero.png differ diff --git a/Frontend/src/assets/images/search_black_24dp.svg b/Frontend/src/assets/images/search_black_24dp.svg new file mode 100644 index 0000000..7b3962b --- /dev/null +++ b/Frontend/src/assets/images/search_black_24dp.svg @@ -0,0 +1 @@ + diff --git a/Frontend/src/styles.css b/Frontend/src/styles.css index d14b926..b694ce2 100644 --- a/Frontend/src/styles.css +++ b/Frontend/src/styles.css @@ -104,18 +104,48 @@ label { padding-right: 4px; } +/* Main Container */ + +.container { + position: fixed; + left: 50%; + margin-left: -820px; + width: 1640px; + height: auto; + display: grid; + grid-template-rows: 70px auto 210px; +} + +.header { + grid-row: 1/2; +} + +.page-content { + grid-row: 2/3; +} + +.footer { + grid-row: 3/4; +} + +/* End of Main Container */ + /* Top Bar */ app-top-bar { - width: 100%; - height: 68px; - background-color: #f2f2f2; + width: 1640px; + height: 70px; + background-color: #ffffff; padding: 16px; + position: fixed; + left: 50%; + top:0; + margin-left: -820px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; - box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12) + /*box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)*/ } app-top-bar h1 {