diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4f27992..1e77297 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -23,6 +23,11 @@ import { FloatLabelComponent } from './components/floatlabel/floatlabel.componen import { InvalidStateComponent } from './components/invalidstate/invalidstate.component'; import { TimelineComponent } from './components/timeline/timeline.component'; import { IconsComponent } from './components/icons/icons.component'; +import { LandingComponent } from './components/landing/landing.component'; +import { LoginComponent } from './components/login/login.component'; +import { ErrorComponent } from './components/error/error.component'; +import { NotfoundComponent } from './components/notfound/notfound.component'; +import { AccessComponent } from './components/access/access.component'; @NgModule({ imports: [ RouterModule.forRoot([ @@ -52,9 +57,14 @@ import { IconsComponent } from './components/icons/icons.component'; {path: 'icons', component: IconsComponent}, {path: 'blocks', component: BlocksComponent}, {path: 'documentation', component: DocumentationComponent} - ] + ], }, - {path: '**', redirectTo: 'pages/empty'}, + {path:'pages/landing', component: LandingComponent}, + {path:'pages/login', component: LoginComponent}, + {path:'pages/error', component: ErrorComponent}, + {path:'pages/notfound', component: NotfoundComponent}, + {path:'pages/access', component: AccessComponent}, + {path: '**', redirectTo: 'pages/notfound'}, ], {scrollPositionRestoration: 'enabled'}) ], exports: [RouterModule] diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts index 8c9f0ff..9ac5d8f 100644 --- a/src/app/app.menu.component.ts +++ b/src/app/app.menu.component.ts @@ -71,6 +71,11 @@ export class AppMenuComponent implements OnInit { items: [ {label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']}, {label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']}, + {label: 'Landing', icon: 'pi pi-fw pi-globe', routerLink: ['pages/landing']}, + {label: 'Login', icon: 'pi pi-fw pi-sign-in', routerLink: ['pages/login']}, + {label: 'Error', icon: 'pi pi-fw pi-times-circle', routerLink: ['pages/error']}, + {label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['pages/notfound']}, + {label: 'Access Denied', icon: 'pi pi-fw pi-lock', routerLink: ['pages/access']}, {label: 'Empty', icon: 'pi pi-fw pi-circle', routerLink: ['/pages/empty']} ] }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 20778cb..45ab02b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppRoutingModule } from './app-routing.module'; +import { StyleClassModule } from 'primeng/styleclass'; import { AccordionModule } from 'primeng/accordion'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { AvatarModule } from 'primeng/avatar'; @@ -124,6 +125,7 @@ import { PaymentComponent} from './components/menus/payment.component'; import { ConfirmationComponent } from './components/menus/confirmation.component'; import { PersonalComponent } from './components/menus/personal.component'; import { SeatComponent } from './components/menus/seat.component'; +import { LandingComponent } from './components/landing/landing.component'; import { CountryService } from './service/countryservice'; import { CustomerService } from './service/customerservice'; @@ -134,6 +136,10 @@ import { PhotoService } from './service/photoservice'; import { ProductService } from './service/productservice'; import { MenuService } from './service/app.menu.service'; import { ConfigService } from './service/app.config.service'; +import { LoginComponent } from './components/login/login.component'; +import { ErrorComponent } from './components/error/error.component'; +import { NotfoundComponent } from './components/notfound/notfound.component'; +import { AccessComponent } from './components/access/access.component'; @NgModule({ imports: [ @@ -223,6 +229,7 @@ import { ConfigService } from './service/app.config.service'; TreeTableModule, VirtualScrollerModule, AppCodeModule, + StyleClassModule, ], declarations: [ AppComponent, @@ -261,6 +268,11 @@ import { ConfigService } from './service/app.config.service'; ConfirmationComponent, PersonalComponent, SeatComponent, + LandingComponent, + LoginComponent, + ErrorComponent, + NotfoundComponent, + AccessComponent, ], providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}, diff --git a/src/app/components/access/access.component.html b/src/app/components/access/access.component.html new file mode 100644 index 0000000..e6e868c --- /dev/null +++ b/src/app/components/access/access.component.html @@ -0,0 +1,22 @@ +
+
+
+ Sakai logo +
+
+
+
+
+ +
+

Access Denied

+ You do not have the necesary permisions. Please contact admins. + Access denied +
+ Go to Dashboard +
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/components/access/access.component.ts b/src/app/components/access/access.component.ts new file mode 100644 index 0000000..fb55ed1 --- /dev/null +++ b/src/app/components/access/access.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-access', + templateUrl: './access.component.html', +}) +export class AccessComponent { } diff --git a/src/app/components/error/error.component.html b/src/app/components/error/error.component.html new file mode 100644 index 0000000..1a061cf --- /dev/null +++ b/src/app/components/error/error.component.html @@ -0,0 +1,22 @@ +
+
+
+ Sakai logo +
+
+
+
+
+ +
+

Error Occured

+ Requested resource is not available. + Error +
+ Go to Dashboard +
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/components/error/error.component.ts b/src/app/components/error/error.component.ts new file mode 100644 index 0000000..8828f32 --- /dev/null +++ b/src/app/components/error/error.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-error', + templateUrl: './error.component.html', +}) +export class ErrorComponent { } diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html new file mode 100644 index 0000000..9c4d3d6 --- /dev/null +++ b/src/app/components/landing/landing.component.html @@ -0,0 +1,357 @@ +
+
+ + Sakai LogoSAKAI + + + + + +
+ +
+
+

Eu sem integereget magna fermentum

+

Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...

+ +
+ +
+ +
+
+
+

Marvelous Features

+ Placerat in egestas erat... +
+ +
+
+
+
+ +
+
Easy to Use
+ Posuere morbi leo urna molestie. +
+
+
+ +
+
+
+
+ +
+
Fresh Design
+ Semper risus in hendrerit. +
+
+
+ +
+
+
+
+ +
+
Well Documented
+ Non arcu risus quis varius quam quisque. +
+
+
+ +
+
+
+
+ +
+
Responsive Layout
+ Nulla malesuada pellentesque elit. +
+
+
+ +
+
+
+
+ +
+
Clean Code
+ Condimentum lacinia quis vel eros. +
+
+
+ +
+
+
+
+ +
+
Dark Mode
+ Convallis tellus id interdum velit laoreet. +
+
+
+ +
+
+
+
+ +
+
Ready to Use
+ Mauris sit amet massa vitae. +
+
+
+ +
+
+
+
+ +
+
Modern Practices
+ Elementum nibh tellus molestie nunc non. +
+
+
+ +
+
+
+
+ +
+
Privacy
+ Neque egestas congue quisque. +
+
+
+ +
+
+

Joséphine Miller

+ Peak Interactive +

“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

+ + +
+
+
+
+ +
+
+

Powerful Everywhere

+ Amet consectetur adipiscing elit... +
+ +
+
+ mockup mobile +
+ +
+
+ +
+

Congue Quisque Egestas

+ Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet. +
+
+ +
+
+
+ +
+

Celerisque Eu Ultrices

+ Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. +
+ +
+ mockup +
+
+
+ +
+
+

Matchless Pricing

+ Amet consectetur adipiscing elit... +
+ +
+
+
+

Free

+ +
+ $0 + per month + +
+ +
    +
  • + + Responsive Layout +
    • +
  • + + Unlimited Push Messages +
    • +
  • + + 50 Support Ticket +
    • +
  • + + Free Shipping +
    • +
+
+
+ +
+
+

Startup

+ +
+ $1 + per month + +
+ +
    +
  • + + Responsive Layout +
    • +
  • + + Unlimited Push Messages +
    • +
  • + + 50 Support Ticket +
    • +
  • + + Free Shipping +
    • +
+
+
+ +
+
+

Free

+ +
+ $999 + per month + +
+ +
    +
  • + + Responsive Layout +
    • +
  • + + Unlimited Push Messages +
    • +
  • + + 50 Support Ticket +
    • +
  • + + Free Shipping +
    • +
+
+
+
+
+ +
+
+
+
+ footer sections +

SAKAI

+
+
+ +
+
+
+

Company

+ About Us + News + Investor Relations + Careers + Media Kit +
+ +
+

Resources

+ Get Started + Learn + Case Studies +
+ +
+

Community

+ Discord + Events + FAQ + Blog +
+ +
+

Legal

+ Brand Policy + Privacy Policy + Terms of Service +
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts new file mode 100644 index 0000000..5b75fa2 --- /dev/null +++ b/src/app/components/landing/landing.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +@Component({ + selector: 'app-landing', + templateUrl: './landing.component.html', + styles: [` + #hero{ + background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%); + height:700px; + overflow:hidden; + } + + @media screen and (min-width: 768px) { + #hero{ + -webkit-clip-path: ellipse(150% 87% at 93% 13%); + clip-path: ellipse(150% 87% at 93% 13%); + height: 430px; + } + } + + @media screen and (min-width: 1300px){ + #hero > img { + position: absolute; + } + + #hero > div > p { + max-width: 450px; + } + } + + @media screen and (max-width: 1300px){ + #hero { + height: 600px; + } + + #hero > img { + position:static; + transform: scale(1); + margin-left: auto; + } + + #hero > div { + width: 100%; + } + + #hero > div > p { + width: 100%; + max-width: 100%; + } + } + `] +}) +export class LandingComponent implements OnInit { + + themeElement: any; + + constructor() { } + + ngOnInit(): void { + this.themeElement = document.getElementById('theme-css'); + this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css'); + } + + ngOnDestroy(): void { + this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css'); + } + +} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html new file mode 100644 index 0000000..24c5559 --- /dev/null +++ b/src/app/components/login/login.component.html @@ -0,0 +1,33 @@ +
+
+
+ Sakai logo +
+
+
+
+ Image +
Welcome, Isabel!
+ Sign in to continue +
+ +
+ + + + + + +
+
+ + +
+ Forgot password? +
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts new file mode 100644 index 0000000..81f11f3 --- /dev/null +++ b/src/app/components/login/login.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styles:[` + :host ::ng-deep .p-password input { + width: 100%; + padding:1rem; + } + + :host ::ng-deep .pi-eye{ + transform:scale(1.6); + margin-right: 1rem; + } + + :host ::ng-deep .pi-eye-slash{ + transform:scale(1.6); + margin-right: 1rem; + } + `] +}) +export class LoginComponent implements OnInit { + + valCheck: string[] = ['remember']; + password: string; + themeElement: any; + + constructor() { } + + ngOnInit(): void { + this.themeElement = document.getElementById('theme-css'); + this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css'); + } + + ngOnDestroy(): void { + this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css'); + } + +} diff --git a/src/app/components/notfound/notfound.component.html b/src/app/components/notfound/notfound.component.html new file mode 100644 index 0000000..a5d359d --- /dev/null +++ b/src/app/components/notfound/notfound.component.html @@ -0,0 +1,46 @@ +
+
+
+ Sakai logo +
+
+
+
+ 404 +

Looks like you are lost

+ Requested resource is not available. +
+
+ +
+
+

Frequently Asked Questions

+ Ultricies mi quis hendrerit dolor. +
+
+
+
+ +
+
+

Solution Center

+ Phasellus faucibus scelerisque eleifend. +
+
+
+
+ +
+
+

Permission Manager

+ Accumsan in nisl nisi scelerisque +
+
+
+ Go to Dashboard +
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/components/notfound/notfound.component.ts b/src/app/components/notfound/notfound.component.ts new file mode 100644 index 0000000..1d57db4 --- /dev/null +++ b/src/app/components/notfound/notfound.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-notfound', + templateUrl: './notfound.component.html', +}) +export class NotfoundComponent { } diff --git a/src/assets/layout/images/asset-access.svg b/src/assets/layout/images/asset-access.svg new file mode 100644 index 0000000..d7da9d0 --- /dev/null +++ b/src/assets/layout/images/asset-access.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/layout/images/asset-error.svg b/src/assets/layout/images/asset-error.svg new file mode 100644 index 0000000..512a8ff --- /dev/null +++ b/src/assets/layout/images/asset-error.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/layout/images/avatar.png b/src/assets/layout/images/avatar.png new file mode 100644 index 0000000..cd1b124 Binary files /dev/null and b/src/assets/layout/images/avatar.png differ diff --git a/src/assets/layout/images/enterprise.png b/src/assets/layout/images/enterprise.png new file mode 100644 index 0000000..94917f7 Binary files /dev/null and b/src/assets/layout/images/enterprise.png differ diff --git a/src/assets/layout/images/free.png b/src/assets/layout/images/free.png new file mode 100644 index 0000000..217a50d Binary files /dev/null and b/src/assets/layout/images/free.png differ diff --git a/src/assets/layout/images/icon.svg b/src/assets/layout/images/icon.svg new file mode 100644 index 0000000..53d2de6 --- /dev/null +++ b/src/assets/layout/images/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/layout/images/logo-blue.svg b/src/assets/layout/images/logo-blue.svg new file mode 100644 index 0000000..3c4ecf7 --- /dev/null +++ b/src/assets/layout/images/logo-blue.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/layout/images/logo-error.svg b/src/assets/layout/images/logo-error.svg new file mode 100644 index 0000000..fd48da1 --- /dev/null +++ b/src/assets/layout/images/logo-error.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/layout/images/logo-orange.svg b/src/assets/layout/images/logo-orange.svg new file mode 100644 index 0000000..a97df44 --- /dev/null +++ b/src/assets/layout/images/logo-orange.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/layout/images/mockup-desktop.png b/src/assets/layout/images/mockup-desktop.png new file mode 100644 index 0000000..9efec14 Binary files /dev/null and b/src/assets/layout/images/mockup-desktop.png differ diff --git a/src/assets/layout/images/mockup.png b/src/assets/layout/images/mockup.png new file mode 100644 index 0000000..aafb00e Binary files /dev/null and b/src/assets/layout/images/mockup.png differ diff --git a/src/assets/layout/images/new-badge.svg b/src/assets/layout/images/new-badge.svg new file mode 100644 index 0000000..a8f521d --- /dev/null +++ b/src/assets/layout/images/new-badge.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/layout/images/peak-logo.svg b/src/assets/layout/images/peak-logo.svg new file mode 100644 index 0000000..72510df --- /dev/null +++ b/src/assets/layout/images/peak-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/layout/images/screen-1.png b/src/assets/layout/images/screen-1.png new file mode 100644 index 0000000..21eeb55 Binary files /dev/null and b/src/assets/layout/images/screen-1.png differ diff --git a/src/assets/layout/images/screen.png b/src/assets/layout/images/screen.png new file mode 100644 index 0000000..41dac37 Binary files /dev/null and b/src/assets/layout/images/screen.png differ diff --git a/src/assets/layout/images/startup.png b/src/assets/layout/images/startup.png new file mode 100644 index 0000000..a43932c Binary files /dev/null and b/src/assets/layout/images/startup.png differ