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

BETTERZON-120
This commit is contained in:
Patrick 2021-06-07 16:48:44 +02:00 committed by GitHub
commit d2d3bcac8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 18492 additions and 5579 deletions

11770
Frontend/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -1,13 +1,8 @@
<div class="container"> <router-outlet></router-outlet>
<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>

View File

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

View File

@ -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 {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
import {ImprintComponent} from './pages/imprint/imprint.component'; import {ImprintComponent} from './pages/imprint/imprint.component';
import {PrivacyComponent} from './pages/privacy/privacy.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 = [ const routes: Routes = [
{path: '', component: LandingpageComponent, pathMatch: 'full'}, {path: '', component: LandingpageComponent, pathMatch: 'full'},
@ -16,6 +18,9 @@ const routes: Routes = [
{path: 'product/:id', component: ProductDetailPageComponent}, {path: 'product/:id', component: ProductDetailPageComponent},
{path: 'impressum', component: ImprintComponent}, {path: 'impressum', component: ImprintComponent},
{path: 'datenschutz', component: PrivacyComponent}, {path: 'datenschutz', component: PrivacyComponent},
{path: 'signin', component: SigninComponent},
{path: 'registration', component: RegistrationComponent},
{path: "product-detail", component: ProductDetailPageComponent},
{path: '**', component: PageNotFoundPageComponent} {path: '**', component: PageNotFoundPageComponent}
]; ];

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -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 { }

View File

@ -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 { }

View File

@ -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;
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

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

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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() {
}
}

View File

@ -1,26 +1,31 @@
<div class="bottom-bar-wrapper"> <footer class="footer text-center">
<div class="folge-uns-item"> <div class="container">
<p><span id="folge">FOLGE</span><span id="uns">UNS</span></p> <div class="row">
</div> <!-- Footer Location-->
<div class="link-items"> <div class="col-lg-4 mb-5 mb-lg-0">
<ul style="list-style-type:none" class="footer-links"> <h4 class="text-uppercase mb-4">Location</h4>
<li><a href="https://github.com/Mueller-Patrick/Betterzon">GiT</a></li> <p class="lead mb-0">
<li><a href="https://blog.betterzon.xyz/">BLOG</a></li> 70376 Stuttgart
<li><a href="https://github.com/Mueller-Patrick/Betterzon/wiki">Wiki</a></li> <br />
</ul>
</div>
<div id="footer-line">
</p>
</div> </div>
<div class="bottom-logo"> <!-- Footer Social Icons-->
<p><span id="better">BETTER</span><span id="zon">ZON</span></p> <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>
<div class="bottom-info"> <!-- Footer About Text-->
<ul style="list-style-type:none" class="footer-links"> <div class="col-lg-4">
<li><a>DATENSCHUTZERKLÄRUNG</a></li> <h4 class="text-uppercase mb-4">SOME INFO</h4>
<li><a>IMPRESSUM</a></li> <p class="lead mb-0">
</ul> 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> </div>
</div>
</footer>

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -1,72 +1,97 @@
.hot-deal-widget-wrapper{ .bbb_deals_wrapper {
width: 1640px; overflow: hidden;
height: 820px;
background-color: #f8f9fa;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
} }
.product-description { .bbb_deals_wrapper:hover {
/*background-color: #3480E3;*/ transform: scale(1.2);
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 { .bbb_deals_featured {
width: 100%;
} }
#hot-deals{ .bbb_deals {
/*background-color: #E53167;*/ width: 100%;
justify-self: center; margin-right: 7%;
align-self: center; padding-top: 80px;
grid-column: 3/10; padding-left: 25px;
grid-row: 1/2; 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 { .bbb_deals_title {
justify-self: center; position: absolute;
align-self: center; top: 10px;
grid-column: 3/10; left: 22px;
grid-row: 2/3; font-size: 18px;
/*background-color: #E53167;*/ font-weight: 500;
color: #000000
} }
#product-name > p { .bbb_deals_slider_container {
font-size: 65px; width: 100%
} }
#sales { .bbb_deals_item {
justify-self: center; width: 100% !important
align-self: center;
grid-column: 3/10;
grid-row: 3/4;
/*background-color: #E53167;*/
} }
#futher-informations { .bbb_deals_image {
justify-self: center; width: 40%;
align-self: center; height: 40%;
grid-column: 3/10;
grid-row: 4/5;
/*background-color: #E53167;*/
} }
#points { .bbb_deals_image img {
justify-self: center; width: 100%
align-self: start;
grid-column: 3/10;
grid-row: 5/6;
/*background-color: #E53167;*/
} }
.product-image { .bbb_deals_content {
display: grid; margin-top: 33px
justify-content: center;
} }
.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
}

View File

@ -1,23 +1,34 @@
<div class="hot-deal-widget-wrapper"> <section class="page-section portfolio" id="top-gesuchte">
<div class="product-description"> <div class="container">
<div id="hot-deals"> <!-- Portfolio Section Heading-->
<h1>HOT DEALS</h1> <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>
<div id="product-name"> <!-- Portfolio Grid Items-->
<h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1> <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>
<div id="sales"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
SPARE BIS ZU 7%! <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>699.00$</strike></span></div>
</div> </div>
<div id="futher-informations"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
Weitere Informationen <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>
</div> </div>
<div id="points"> <div class="available_bar">
points <span style="width:17%"></span>
</div> </div>
</div> </div>
<div class="product-image">
<img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
</div> </div>
</div> </div>
</div>
</div>
</section>

View File

@ -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({ @Component({
selector: 'app-hot-deals-widget', selector: 'app-hot-deals-widget',
@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
}) })
export class HotDealsWidgetComponent implements OnInit { export class HotDealsWidgetComponent implements OnInit {
constructor() { } products: Product[] = [];
@Input() numberOfProducts: number;
@Input() showProductPicture: boolean;
@Input() searchQuery: string;
@Input() type: string;
ngOnInit(): void { 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)]);
}
} }

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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)]);
}
}

View File

@ -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;
}

View File

@ -1,26 +1,22 @@
<div class="top-bar-wrapper"> <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="<top-logo>"> <div class="container">
<a><span id="better">BETTER</span><span id="zon">ZON</span></a> <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>
<div class="footer_space"> </nav>
</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>

View File

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

View File

@ -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="mainComponents">
<div id="searchContainer"> <div id="searchContainer">
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()"> <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">

View File

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

View File

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

View File

@ -6,11 +6,16 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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"> <!-- Favicon-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <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> <script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root>LOADING</app-root>
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff