carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pages

Browse Source
This commit is contained in:
Çetin
2022-01-25 10:37:27 +03:00
parent 090b004485
commit c6271839d4
18 changed files with 271 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@@ -65,7 +65,7 @@ import { AccessComponent } from './components/access/access.component';
{path:'pages/notfound', component: NotfoundComponent},
{path:'pages/access', component: AccessComponent},
{path: '**', redirectTo: 'pages/notfound'},
], {scrollPositionRestoration: 'enabled'})
], {scrollPositionRestoration: 'enabled', anchorScrolling:'enabled'})
],
exports: [RouterModule]
})

2
src/app/app.menu.component.ts
View File

@@ -47,7 +47,7 @@ export class AppMenuComponent implements OnInit {
{label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
{label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
{label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']},
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']},
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu/personal']},
{label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
{label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
{label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']},

4
src/app/components/access/access.component.html
View File

@@ -1,10 +1,10 @@
<div class="surface-card flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="surface-50 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
</div>
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);">
<div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-0) 38.9%, rgba(255, 255, 255, 0));">
<div class="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;">
<i class="text-50 pi pi-fw pi-lock text-2xl"></i>

6
src/app/components/error/error.component.html
View File

@@ -1,13 +1,13 @@
<div class="surface-card flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="surface-50 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%;">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="assets/layout/images/logo-error.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
</div>
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
<div class="surface-50 h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-0) 38.9%, rgba(255, 255, 255, 0));">
<div class="grid flex flex-column align-items-center">
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-900"></i>
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
</div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600">Requested resource is not available.</span>

62
src/app/components/landing/landing.component.html
View File

@@ -1,31 +1,31 @@
<div class="surface-card overflow-hidden">
<div id="home" class="surface-card overflow-hidden">
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
<a class="flex align-items-center">
<a class="flex align-items-center" href="#">
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
</a>
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<i class="pi pi-bars text-4xl"></i>
</a>
<div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:92%">
<div class="align-items-center surface-card flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:92%">
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Home</span>
</a>
</li>
<li>
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Features</span>
</a>
</li>
<li>
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Pricing</span>
<a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Highlights</span>
</a>
</li>
<li>
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Contact</span>
<a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Pricing</span>
</a>
</li>
</ul>
@@ -36,16 +36,16 @@
</div>
</div>
<div class="grid py-4 px-4 lg:px-8 relative" id="hero">
<div id="hero" class="grid py-4 px-4 lg:px-8 relative">
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
</div>
<img src="assets/layout/images/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
</div>
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
<div class="grid justify-content-center">
<div class="col-12 text-center mt-8 mb-4">
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
@@ -172,7 +172,7 @@
</div>
</div>
<div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
<div class="text-center">
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
@@ -180,11 +180,11 @@
<div class="grid mt-8 pb-2 md:pb-8">
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius:8px;">
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
<img src="assets/layout/images/mockup.svg" class="w-11" alt="mockup mobile">
</div>
<div class="col-12 lg:col-6 my-auto flex flex-column md:align-items-end md:text-right ">
<div class="flex align-items-center justify-content-center bg-purple-200" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
</div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
@@ -193,8 +193,8 @@
</div>
<div class="grid my-8 pt-2 md:pt-8">
<div class="col-12 lg:col-6 my-auto flex flex-column align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width:4.2rem; height:4.2rem; border-radius:10px;">
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width:4.2rem; height:4.2rem; border-radius:10px;">
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
</div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
@@ -202,12 +202,12 @@
</div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
<img src="assets/layout/images/mockup-desktop.png" class="w-11" alt="mockup">
<img src="assets/layout/images/mockup-desktop.svg" class="w-11" alt="mockup">
</div>
</div>
</div>
<div class="py-4 px-4 lg:px-8 my-2 md:my-4">
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
<div class="text-center">
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
@@ -215,9 +215,9 @@
<div class="grid justify-content-between mt-8 md:mt-0">
<div class="col-12 lg:col-4 p-0 md:p-3">
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center">Free</h3>
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="assets/layout/images/free.svg" class="w-10 h-10 mx-auto" alt="free">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$0</span>
<span class="text-600">per month</span>
@@ -246,9 +246,9 @@
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center">Startup</h3>
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="assets/layout/images/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$1</span>
<span class="text-600">per month</span>
@@ -277,9 +277,9 @@
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
<div class="p-3 flex flex-column border-cyan-200" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center">Free</h3>
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="assets/layout/images/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
<div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$999</span>
<span class="text-600">per month</span>
@@ -312,10 +312,10 @@
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
<div class="grid justify-content-between">
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
</div>
</a>
</div>
<div class="col-12 md:col-10 lg:col-7">

11
src/app/components/landing/landing.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { ConfigService } from '../../service/app.config.service';
import { AppConfig } from '../../api/appconfig';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
@@ -12,17 +13,23 @@ import { Subscription } from 'rxjs';
overflow:hidden;
}
.pricing-card:hover{
border:2px solid var(--cyan-200) !important;
}
@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;
height: 530px;
}
}
@media screen and (min-width: 1300px){
#hero > img {
position: absolute;
transform:scale(1.2);
top:15%;
}
#hero > div > p {
@@ -58,7 +65,7 @@ export class LandingComponent implements OnInit, OnDestroy {
subscription: Subscription;
constructor(public configService: ConfigService) { }
constructor(public configService: ConfigService, public router: Router) { }
ngOnInit(): void {
this.config = this.configService.config;

6
src/app/components/login/login.component.html
View File

@@ -1,10 +1,10 @@
<div class="surface-card flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="surface-50 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
</div>
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
<div class="surface-50 h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-0) 38.9%, rgba(255, 255, 255, 0));">
<div class="text-center mb-5">
<img src="assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
@@ -13,7 +13,7 @@
<div class="w-full md:w-10 mx-auto">
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
<input id="email1" type="text" pInputText class="w-full mb-3" style="padding:1rem;">
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full mb-3" style="padding:1rem;">
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>

18
src/app/components/notfound/notfound.component.html
View File

@@ -1,24 +1,24 @@
<div class="surface-card flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="surface-50 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
<div class="col-12 mt-5 xl:mt-0 text-center">
<img src="assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
</div>
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
<div class="surface-card flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
<div class="surface-50 flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-0) 38.9%, rgba(255, 255, 255, 0));">
<div class="grid flex-column align-items-center">
<span class="text-blue-500 font-bold text-3xl">404</span>
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Looks like you are lost</h1>
<span class="text-600">Requested resource is not available.</span>
<div class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
<a href="/" class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
<div class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="text-50 pi pi-fw pi-table text-2xl"></i>
</div>
<div class="ml-4">
<p class="text-900 lg:text-xl font-medium mb-0">Frequently Asked Questions</p>
<p class="text-900 lg:text-xl font-medium mb-1 block">Frequently Asked Questions</p>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</div>
</div>
<div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
</a>
<a href="/" class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
<div class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
</div>
@@ -26,8 +26,8 @@
<p class="text-900 lg:text-xl font-medium mb-0">Solution Center</p>
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</div>
</div>
<div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
</a>
<a href="/" class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
<div class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;">
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
</div>
@@ -35,7 +35,7 @@
<p class="text-900 lg:text-xl font-medium mb-0">Permission Manager</p>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</div>
</div>
</a>
<div class="col-12 mt-5 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
</div>