Merge pull request #77 from Mueller-Patrick/BETTERZON-120

BETTERZON-120

Frontend/package.json

@@ -7,7 +7,8 @@
         "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",
-        "e2e": "ng e2e"
+        "e2e": "ng e2e",
+        "postinstall": "ngcc"
     },
     "private": true,
     "dependencies": {

Frontend/src/app/app.component.css

@@ -1 +1,9 @@
-
+.wrapper_app {
+    padding-bottom: 2.5rem;    /* Footer height */
+}
+.footer_app {
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    height: 2.5rem;            /* Footer height */
+}

Frontend/src/app/app.component.html

@@ -1,13 +1,8 @@
-<div class="container">
-    <div class="header">
-        <app-top-bar></app-top-bar>
-    </div>
-    <div class="page-content">
 <router-outlet></router-outlet>
-    </div>
-    <div class="footer">
-        <app-bottom-bar></app-bottom-bar>
-    </div>
-</div>
+
+
+
+
+
 
 

Frontend/src/app/app.module.ts

@@ -13,7 +13,7 @@ import {NgApexchartsModule} from 'ng-apexcharts';
 import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
 import {HeaderComponent} from './components/header/header.component';
 import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 import {MatMenuModule} from '@angular/material/menu';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -31,7 +31,13 @@ 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';
-
+import { RegistrationComponent } from './components/auth/registration/registration.component';
+import { MatCardModule } from "@angular/material/card";
+import {SigninComponent} from "./components/auth/signin/signin.component";
+import { CopyrightComponent } from './components/copyright/copyright.component';
+import { GreetingInfoSliderComponent } from './components/greeting-info-slider/greeting-info-slider.component';
+import { KundenComponent } from './components/kunden/kunden.component';
+import { AboutUsComponent } from './components/about-us/about-us.component';
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -89,7 +95,13 @@ const cookieConfig: NgcCookieConsentConfig = {
         TopBarComponent,
         BottomBarComponent,
         HotDealsWidgetComponent,
-        SliderForProductsComponent
+        SliderForProductsComponent,
+        RegistrationComponent,
+        SigninComponent,
+        CopyrightComponent,
+        GreetingInfoSliderComponent,
+        KundenComponent,
+        AboutUsComponent,
     ],
     imports: [
         BrowserModule,
@@ -110,6 +122,8 @@ const cookieConfig: NgcCookieConsentConfig = {
         RouterModule.forRoot([
             {path: '', component: LandingpageComponent},
         ]),
+        MatCardModule,
+        ReactiveFormsModule,
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/app/app.routing.ts

@@ -9,6 +9,8 @@ import {ProductSearchPageComponent} from './pages/product-search-page/product-se
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
+import {SigninComponent} from "./components/auth/signin/signin.component";
+import {RegistrationComponent} from "./components/auth/registration/registration.component";
 
 const routes: Routes = [
     {path: '', component: LandingpageComponent, pathMatch: 'full'},
@@ -16,6 +18,9 @@ const routes: Routes = [
     {path: 'product/:id', component: ProductDetailPageComponent},
     {path: 'impressum', component: ImprintComponent},
     {path: 'datenschutz', component: PrivacyComponent},
+    {path: 'signin', component: SigninComponent},
+    {path: 'registration', component: RegistrationComponent},
+    {path: "product-detail", component: ProductDetailPageComponent},
     {path: '**', component: PageNotFoundPageComponent}
 ];
 

Frontend/src/app/components/about-us/about-us.component.html

@@ -0,0 +1,17 @@
+<section class="page-section bg-primary text-white mb-0" id="about">
+    <div class="container">
+        <!-- About Section Heading-->
+        <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom divider-light">
+            <div class="divider-custom-line"></div>
+            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
+            <div class="divider-custom-line"></div>
+        </div>
+        <!-- About Section Content-->
+        <div class="row">
+            <div class="col-lg-4 ms-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
+            <div class="col-lg-4 me-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
+        </div>
+    </div>
+</section>

Frontend/src/app/components/about-us/about-us.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutUsComponent } from './about-us.component';
+
+describe('AboutUsComponent', () => {
+  let component: AboutUsComponent;
+  let fixture: ComponentFixture<AboutUsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutUsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/about-us/about-us.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-us',
+  templateUrl: './about-us.component.html',
+  styleUrls: ['./about-us.component.css']
+})
+export class AboutUsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/auth/auth-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {RegistrationComponent} from "./registration/registration.component";
+import {SigninComponent} from "./signin/signin.component";
+import {ResetpasswortComponent} from "./resetpasswort/resetpasswort.component";
+
+const routes: Routes = [
+    {
+        path: 'registration',
+        component: RegistrationComponent
+    },
+    {
+        path: 'signin',
+        component: SigninComponent
+    },
+    {
+        path: 'resetpasswort',
+        component: ResetpasswortComponent
+    },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuthRoutingModule { }

Frontend/src/app/components/auth/auth.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuthRoutingModule } from './auth-routing.module';
+import { SigninComponent } from "./signin/signin.component";
+import { RegistrationComponent } from './registration/registration.component';
+import { ResetpasswortComponent } from './resetpasswort/resetpasswort.component';
+
+
+@NgModule({
+  declarations: [SigninComponent, RegistrationComponent, ResetpasswortComponent],
+  imports: [
+    CommonModule,
+    AuthRoutingModule,
+  ],
+  exports: [
+      SigninComponent,
+      RegistrationComponent,
+      ResetpasswortComponent,
+  ],
+})
+export class AuthModule { }

Frontend/src/app/components/auth/registration/registration.component.css

@@ -0,0 +1,76 @@
+.main-content{
+    width: 50%;
+    border-radius: 20px;
+    box-shadow: 0 5px 5px rgba(0,0,0,.4);
+    margin: 5em auto;
+    display: flex;
+}
+.company__info{
+    background-color: #008080;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+}
+.fa-android{
+    font-size:3em;
+}
+@media screen and (max-width: 640px) {
+    .main-content{width: 90%;}
+    .company__info{
+        display: none;
+    }
+    .login_form{
+        border-top-left-radius:20px;
+        border-bottom-left-radius:20px;
+    }
+}
+@media screen and (min-width: 642px) and (max-width:800px){
+    .main-content{width: 70%;}
+}
+.row > h2{
+    color:#008080;
+}
+.login_form{
+    background-color: #fff;
+    border-top-right-radius:20px;
+    border-bottom-right-radius:20px;
+    border-top:1px solid #ccc;
+    border-right:1px solid #ccc;
+}
+form{
+    padding: 0 2em;
+}
+.form__input{
+    width: 100%;
+    border:0px solid transparent;
+    border-radius: 0;
+    border-bottom: 1px solid #aaa;
+    padding: 1em .5em .5em;
+    padding-left: 2em;
+    outline:none;
+    margin:1.5em auto;
+    transition: all .5s ease;
+}
+.form__input:focus{
+    border-bottom-color: #008080;
+    box-shadow: 0 0 5px rgba(0,80,80,.4);
+    border-radius: 4px;
+}
+.btn_signin{
+    transition: all .5s ease;
+    width: 70%;
+    border-radius: 30px;
+    color:#008080;
+    font-weight: 600;
+    background-color: #fff;
+    border: 1px solid #008080;
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+}
+.btn_signin:hover, .btn:focus{
+    background-color: #008080;
+    color:#fff;
+}

Frontend/src/app/components/auth/registration/registration.component.html

@@ -0,0 +1,40 @@
+<div class="container">
+    <div class="row main-content bg-success text-center">
+        <div class="col-md-4 text-center company__info">
+            <span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
+        </div>
+        <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
+            <div class="container-fluid">
+                <div class="row">
+                    <h2>Konto erstellen</h2>
+                </div>
+                <div class="row">
+                    <form control="" class="form-group">
+                        <div class="row">
+                            <input type="text" name="username" id="username" class="form__input" placeholder="Nickname">
+                        </div>
+                        <div class="row">
+                            <!-- <span class="fa fa-lock"></span> -->
+                            <input type="password" name="password" id="email" class="form__input" placeholder= "E-Mail">
+                        </div>
+                        <div class="row">
+                            <!-- <span class="fa fa-lock"></span> -->
+                            <input type="password" name="password" id="password" class="form__input" placeholder="Kennwort erstellen">
+                        </div>
+                        <div class="row">
+                            <!-- <span class="fa fa-lock"></span> -->
+                            <input type="password" name="password" id="password_repeated" class="form__input" placeholder="Kennwort bestätigen">
+                        </div>
+                        <div class="row">
+                            <input type="submit" value="Erstellen" class="btn_signin">
+                        </div>
+                        <div class="row">
+                            <p>Haben Sie bereits ein Konto?<a href="/signin">Sich anmelden</a></p>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

Frontend/src/app/components/auth/registration/registration.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrationComponent } from './registration.component';
+
+describe('RegistrationComponent', () => {
+  let component: RegistrationComponent;
+  let fixture: ComponentFixture<RegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegistrationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/registration/registration.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-registration',
+  templateUrl: './registration.component.html',
+  styleUrls: ['./registration.component.css']
+})
+export class RegistrationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.html

@@ -0,0 +1 @@
+<p>resetpasswort works!</p>

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetpasswortComponent } from './resetpasswort.component';
+
+describe('ResetpasswortComponent', () => {
+  let component: ResetpasswortComponent;
+  let fixture: ComponentFixture<ResetpasswortComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResetpasswortComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetpasswortComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resetpasswort',
+  templateUrl: './resetpasswort.component.html',
+  styleUrls: ['./resetpasswort.component.css']
+})
+export class ResetpasswortComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/auth/signin/signin.component.css

@@ -0,0 +1,76 @@
+.main-content{
+    width: 50%;
+    border-radius: 20px;
+    box-shadow: 0 5px 5px rgba(0,0,0,.4);
+    margin: 5em auto;
+    display: flex;
+}
+.company__info{
+    background-color: #008080;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+}
+.fa-android{
+    font-size:3em;
+}
+@media screen and (max-width: 640px) {
+    .main-content{width: 90%;}
+    .company__info{
+        display: none;
+    }
+    .login_form{
+        border-top-left-radius:20px;
+        border-bottom-left-radius:20px;
+    }
+}
+@media screen and (min-width: 642px) and (max-width:800px){
+    .main-content{width: 70%;}
+}
+.row > h2{
+    color:#008080;
+}
+.login_form{
+    background-color: #fff;
+    border-top-right-radius:20px;
+    border-bottom-right-radius:20px;
+    border-top:1px solid #ccc;
+    border-right:1px solid #ccc;
+}
+form{
+    padding: 0 2em;
+}
+.form__input{
+    width: 100%;
+    border:0px solid transparent;
+    border-radius: 0;
+    border-bottom: 1px solid #aaa;
+    padding: 1em .5em .5em;
+    padding-left: 2em;
+    outline:none;
+    margin:1.5em auto;
+    transition: all .5s ease;
+}
+.form__input:focus{
+    border-bottom-color: #008080;
+    box-shadow: 0 0 5px rgba(0,80,80,.4);
+    border-radius: 4px;
+}
+.btn_signin{
+    transition: all .5s ease;
+    width: 70%;
+    border-radius: 30px;
+    color:#008080;
+    font-weight: 600;
+    background-color: #fff;
+    border: 1px solid #008080;
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+}
+.btn_signin:hover, .btn:focus{
+    background-color: #008080;
+    color:#fff;
+}

Frontend/src/app/components/auth/signin/signin.component.html

@@ -0,0 +1,34 @@
+<div class="container">
+    <div class="row main-content bg-success text-center">
+        <div class="col-md-4 text-center company__info">
+            <span class="company__logo" routerLink=""><h2><img src="assets/images/Betterzon.svg"></h2></span>
+        </div>
+        <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
+            <div class="container-fluid">
+                <div class="row">
+                    <h2>Anmelden</h2>
+                </div>
+                <div class="row">
+                    <form control="" class="form-group">
+                        <div class="row">
+                            <input type="text" name="username" id="username" class="form__input" placeholder="Username">
+                        </div>
+                        <div class="row">
+                            <!-- <span class="fa fa-lock"></span> -->
+                            <input type="password" name="password" id="password" class="form__input" placeholder="Password">
+                        </div>
+                        <div class="row">
+                            <input type="submit" value="Anmelden" class="btn_signin">
+                        </div>
+                    </form>
+                </div>
+                <div class="row">
+                    <p>Noch kein Konto?<a href="/registration">Konto erstellen</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+

Frontend/src/app/components/auth/signin/signin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SigninComponent } from './signin.component';
+
+describe('SigninComponent', () => {
+  let component: SigninComponent;
+  let fixture: ComponentFixture<SigninComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SigninComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SigninComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/signin/signin.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-signin',
+    templateUrl: './signin.component.html',
+    styleUrls: ['./signin.component.css']
+})
+
+export class SigninComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+    onSubmit() {
+
+    }
+}

Frontend/src/app/components/bottom-bar/bottom-bar.component.html

@@ -1,26 +1,31 @@
-<div class="bottom-bar-wrapper">
-    <div class="folge-uns-item">
-        <p><span id="folge">FOLGE</span><span id="uns">UNS</span></p>
-    </div>
-    <div class="link-items">
-        <ul style="list-style-type:none" class="footer-links">
-            <li><a href="https://github.com/Mueller-Patrick/Betterzon">GiT</a></li>
-            <li><a href="https://blog.betterzon.xyz/">BLOG</a></li>
-            <li><a href="https://github.com/Mueller-Patrick/Betterzon/wiki">Wiki</a></li>
-        </ul>
-    </div>
-    <div id="footer-line">
+<footer class="footer text-center">
+    <div class="container">
+        <div class="row">
+            <!-- Footer Location-->
+            <div class="col-lg-4 mb-5 mb-lg-0">
+                <h4 class="text-uppercase mb-4">Location</h4>
+                <p class="lead mb-0">
+                    70376 Stuttgart
+                    <br />
 
+                </p>
             </div>
-    <div class="bottom-logo">
-        <p><span id="better">BETTER</span><span id="zon">ZON</span></p>
+            <!-- Footer Social Icons-->
+            <div class="col-lg-4 mb-5 mb-lg-0">
+                <h4 class="text-uppercase mb-4">FOLGE UNS</h4>
+                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-github"></i></a>
+                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
+                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
+                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
             </div>
-    <div class="bottom-info">
-        <ul style="list-style-type:none" class="footer-links">
-            <li><a>DATENSCHUTZERKLÄRUNG</a></li>
-            <li><a>IMPRESSUM</a></li>
-        </ul>
+            <!-- Footer About Text-->
+            <div class="col-lg-4">
+                <h4 class="text-uppercase mb-4">SOME INFO</h4>
+                <p class="lead mb-0">
+                    text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                </p>
             </div>
         </div>
-
+    </div>
+</footer>
 

Frontend/src/app/components/copyright/copyright.component.html

@@ -0,0 +1,3 @@
+<div class="copyright py-4 text-center text-white">
+    <div class="container"><small>Copyright &copy; Your Website 2021</small></div>
+</div>

Frontend/src/app/components/copyright/copyright.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyrightComponent } from './copyright.component';
+
+describe('CopyrightComponent', () => {
+  let component: CopyrightComponent;
+  let fixture: ComponentFixture<CopyrightComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CopyrightComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CopyrightComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/copyright/copyright.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-copyright',
+  templateUrl: './copyright.component.html',
+  styleUrls: ['./copyright.component.css']
+})
+export class CopyrightComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.html

@@ -0,0 +1,16 @@
+<header class="masthead bg-primary text-white text-center">
+    <div class="container d-flex align-items-center flex-column">
+        <!-- Masthead Avatar Image-->
+        <img class="masthead-avatar mb-5" src="assets/images/Betterzon.svg" alt="..." />
+        <!-- Masthead Heading-->
+        <h1 class="masthead-heading text-uppercase mb-0"></h1>
+        <!-- Icon Divider-->
+        <div class="divider-custom divider-light">
+            <div class="divider-custom-line"></div>
+            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
+            <div class="divider-custom-line"></div>
+        </div>
+        <!-- Masthead Subheading-->
+        <p class="masthead-subheading font-weight-light mb-0"></p>
+    </div>
+</header>

Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GreetingInfoSliderComponent } from './greeting-info-slider.component';
+
+describe('GreetingInfoSliderComponent', () => {
+  let component: GreetingInfoSliderComponent;
+  let fixture: ComponentFixture<GreetingInfoSliderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GreetingInfoSliderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GreetingInfoSliderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-greeting-info-slider',
+  templateUrl: './greeting-info-slider.component.html',
+  styleUrls: ['./greeting-info-slider.component.css']
+})
+export class GreetingInfoSliderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css

@@ -1,72 +1,97 @@
-.hot-deal-widget-wrapper{
-    width: 1640px;
-    height: 820px;
-    background-color: #f8f9fa;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    align-items: center;
+.bbb_deals_wrapper {
+    overflow: hidden;
 }
 
-.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);
+.bbb_deals_wrapper:hover {
+    transform: scale(1.2);
 }
 
-.product-image {
-
+.bbb_deals_featured {
+    width: 100%;
 }
 
-#hot-deals{
-    /*background-color: #E53167;*/
-    justify-self: center;
-    align-self: center;
-    grid-column: 3/10;
-    grid-row: 1/2;
+.bbb_deals {
+    width: 100%;
+    margin-right: 7%;
+    padding-top: 80px;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-bottom: 34px;
+    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    margin-top: 0px
 }
 
-#product-name {
-    justify-self: center;
-    align-self: center;
-    grid-column: 3/10;
-    grid-row: 2/3;
-    /*background-color: #E53167;*/
+.bbb_deals_title {
+    position: absolute;
+    top: 10px;
+    left: 22px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #000000
 }
 
-#product-name > p {
-    font-size: 65px;
+.bbb_deals_slider_container {
+    width: 100%
 }
 
-#sales {
-    justify-self: center;
-    align-self: center;
-    grid-column: 3/10;
-    grid-row: 3/4;
-    /*background-color: #E53167;*/
+.bbb_deals_item {
+    width: 100% !important
 }
 
-#futher-informations {
-    justify-self: center;
-    align-self: center;
-    grid-column: 3/10;
-    grid-row: 4/5;
-    /*background-color: #E53167;*/
+.bbb_deals_image {
+    width: 40%;
+    height: 40%;
 }
 
-#points {
-    justify-self: center;
-    align-self: start;
-    grid-column: 3/10;
-    grid-row: 5/6;
-    /*background-color: #E53167;*/
+.bbb_deals_image img {
+    width: 100%
 }
 
-.product-image {
-    display: grid;
-    justify-content: center;
+.bbb_deals_content {
+    margin-top: 33px
 }
 
+.bbb_deals_item_category a {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5)
+}
+
+#bbb_deals_item_price_a {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    color: red;
+}
+
+#bbb_deals_item_price_b {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    color: green;
+}
+
+.bbb_deals_item_name {
+    max-width: 300px;
+    word-wrap: break-word;
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+}
+
+.bbb_deals_item_price {
+    font-size: 24px;
+    font-weight: 500;
+    color: #228B22;
+}
+
+.available {
+    margin-top: 19px
+}
+
+.available_title {
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 400
+}

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html

@@ -1,23 +1,34 @@
-<div class="hot-deal-widget-wrapper">
-    <div class="product-description">
-        <div id="hot-deals">
-            <h1>HOT DEALS</h1>
+<section class="page-section portfolio" id="top-gesuchte">
+    <div class="container">
+        <!-- Portfolio Section Heading-->
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-ANGEBOTE</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom">
+            <div class="divider-custom-line"></div>
         </div>
-        <div id="product-name">
-            <h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1>
+        <!-- Portfolio Grid Items-->
+        <div class="row justify-content-center">
+            <!-- Portfolio Item 1-->
+            <div class="col-md-4 mx-auto my-5" *ngFor="let product of products">
+                <div class="bbb_deals_wrapper">
+                    <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg" alt=""></div>
+                    <div class="bbb_deals_content">
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
+                            <div class="bbb_deals_item_name">{{product.name}}</div>
                         </div>
-        <div id="sales">
-            SPARE BIS ZU 7%!
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
+                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>699.00$</strike></span></div>
                         </div>
-        <div id="futher-informations">
-            Weitere Informationen
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
+                            <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>
                         </div>
-        <div id="points">
-            points
+                        <div class="available_bar">
+                            <span style="width:17%"></span>
                         </div>
                         </div>
-    <div class="product-image">
-        <img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
                     </div>
                 </div>
+            </div>
+        </div>
+</section>
 

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {Product} from '../../models/product';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-hot-deals-widget',
@@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HotDealsWidgetComponent implements OnInit {
 
-  constructor() { }
+    products: Product[] = [];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
+    @Input() searchQuery: string;
+    @Input() type: string;
+
+    constructor(
+        private apiService: ApiService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
+    }
 
     ngOnInit(): void {
+        this.loadParams();
     }
 
+    loadParams(): void {
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/product/' + product.product_id)]);
+    }
+
+
 }

Frontend/src/app/components/kunden/kunden.component.html

@@ -0,0 +1,38 @@
+<section class="page-section portfolio" id="unsere-kunden">
+    <div class="container">
+        <!-- Portfolio Section Heading-->
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">SIE VERTRAUEN UNS</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom">
+            <div class="divider-custom-line"></div>
+        </div>
+        <!-- Portfolio Grid Items-->
+        <div class="row justify-content-center">
+            <!-- Portfolio Item 1-->
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

Frontend/src/app/components/kunden/kunden.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KundenComponent } from './kunden.component';
+
+describe('KundenComponent', () => {
+  let component: KundenComponent;
+  let fixture: ComponentFixture<KundenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KundenComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KundenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/kunden/kunden.component.ts

@@ -0,0 +1,67 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {Product} from '../../models/product';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-kunden',
+  templateUrl: './kunden.component.html',
+  styleUrls: ['./kunden.component.css']
+})
+export class KundenComponent implements OnInit {
+    products: Product[] = [];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
+    @Input() searchQuery: string;
+    @Input() type: string;
+
+    constructor(
+        private apiService: ApiService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.loadParams();
+    }
+
+    loadParams(): void {
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/product/' + product.product_id)]);
+    }
+
+}

Frontend/src/app/components/top-bar/top-bar.component.css

@@ -1,54 +0,0 @@
-.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;
-}

Frontend/src/app/components/top-bar/top-bar.component.html

@@ -1,26 +1,22 @@
-<div class="top-bar-wrapper">
-    <div class="<top-logo>">
-        <a><span id="better">BETTER</span><span id="zon">ZON</span></a>
+<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
+    <div class="container">
+        <a class="navbar-brand" routerLink=""> Betterzon</a>
+        <form class="form-inline my-2 my-lg-0">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+        </form>
+        <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+            Menu
+            <i class="fas fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+            <ul class="navbar-nav ms-auto">
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#top-gesuchte">Top-Gesuchte</a></li>
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">über uns</a></li>
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li>
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li>
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li>
+            </ul>
+        </div>
     </div>
-    <div class="links">
-        <nav class="_links">
-            <a>KONTAKTIERE UNS</a>
-            <a>KUNDEN</a>
-            <a>FAQ</a>
 </nav>
-    </div>
-    <div class="footer_space">
 
-    </div>
-    <div class="search-button">
-        <a>
-            <img src="assets/images/search_black_24dp.svg" alt="Sarch button">
-        </a>
-    </div>
-    <div class="links">
-        <nav class="_signing_links">
-            <a>SIGN UP</a>
-            <a><span id="signin">SIGN IN</span></a>
-        </nav>
-    </div>
-</div>

Frontend/src/app/components/top-bar/top-bar.component.ts

@@ -11,7 +11,7 @@ export class TopBarComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+    ngOnInit() {
     }
 
 }

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,5 +1,12 @@
-<app-hot-deals-widget></app-hot-deals-widget>
+<app-top-bar></app-top-bar>
 
+<app-greeting-info-slider></app-greeting-info-slider>
+<app-hot-deals-widget></app-hot-deals-widget>
+<app-about-us></app-about-us>
+<app-kunden></app-kunden>
+
+<app-bottom-bar></app-bottom-bar>
+<app-copyright></app-copyright>
 <!--<div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">

Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html

@@ -1,2 +1,3 @@
 <h1>404</h1>
 <p>Page not found!</p>
+<p routerLink="">Zurück</p>

Frontend/src/app/pages/product-detail-page/product-detail-page.component.html

@@ -1,5 +1,7 @@
+<app-top-bar></app-top-bar>
+
 <div id="mainComponents">
     <app-product-details [productId]="productId"></app-product-details>
     <app-newest-prices-list [productId]="productId"></app-newest-prices-list>
 </div>
-<app-footer></app-footer>
+

Frontend/src/index.html

@@ -6,11 +6,16 @@
         <base href="/">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" type="image/x-icon" href="favicon.ico">
-        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <!-- Favicon-->
+        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+        <!-- Font Awesome icons (free version)-->
+        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
+        <!-- Google fonts-->
+        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
+        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
         <script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
     </head>
     <body>
-        <app-root></app-root>
+        <app-root>LOADING</app-root>
     </body>
 </html>