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

Add pages

Browse Source
This commit is contained in:
Çetin
2024-12-30 13:29:44 +03:00
parent f3d1148b3e
commit c7be0df88e
11 changed files with 992 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.routes.ts
View File

@@ -11,10 +11,10 @@ export const routes: Routes = [
// { path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) },
// { path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) },
// { path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) },
// { path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) }
{ path: 'pages', loadChildren: () => import('../views/pages/pages.routes')},
]
},
{ path: 'auth', loadChildren: () => import('../views/pages/auth/routes')},
{ path: 'auth', loadChildren: () => import('../views/pages/auth/auth.routes')},
{ path: '**', redirectTo: '/notfound' },
];

1
src/views/pages/auth/access.ts
View File

@@ -4,7 +4,6 @@ import {RouterModule} from '@angular/router';
import {RippleModule} from 'primeng/ripple';
@Component({
selector: 'app-access',
standalone: true,
imports: [
ButtonModule,

0
src/views/pages/auth/routes.ts → src/views/pages/auth/auth.routes.ts
View File

1
src/views/pages/auth/error.ts
View File

@@ -4,7 +4,6 @@ import {RippleModule} from 'primeng/ripple';
import {RouterModule} from '@angular/router';
@Component({
selector: 'app-error',
imports: [ButtonModule, RippleModule, RouterModule],
standalone: true,
template: `

1
src/views/pages/auth/login.ts
View File

@@ -10,7 +10,6 @@ import {LayoutService} from '../../../app/layout/service/app.layout.service';
@Component({
selector: 'app-login',
standalone: true,
imports: [
ButtonModule,

376
src/views/pages/crud.ts Normal file
View File

@@ -0,0 +1,376 @@
import {Component, inject, OnInit} from '@angular/core';
import { MessageService } from 'primeng/api';
import {Table, TableModule} from 'primeng/table';
import {CommonModule} from '@angular/common';
import {FileUploadModule} from 'primeng/fileupload';
import {FormsModule} from '@angular/forms';
import {ButtonModule} from 'primeng/button';
import {RippleModule} from 'primeng/ripple';
import {ToastModule} from 'primeng/toast';
import {ToolbarModule} from 'primeng/toolbar';
import {RatingModule} from 'primeng/rating';
import {InputTextModule} from 'primeng/inputtext';
import {TextareaModule} from 'primeng/textarea';
import {SelectModule} from 'primeng/select';
import {RadioButtonModule} from 'primeng/radiobutton';
import {InputNumberModule} from 'primeng/inputnumber';
import {DialogModule} from 'primeng/dialog';
import {Product} from '../../app/demo/api/product';
import {ProductService} from '../../app/demo/service/product.service';
@Component({
standalone: true,
imports: [
CommonModule,
TableModule,
FileUploadModule,
FormsModule,
ButtonModule,
RippleModule,
ToastModule,
ToolbarModule,
RatingModule,
InputTextModule,
TextareaModule,
SelectModule,
RadioButtonModule,
InputNumberModule,
DialogModule
],
template: `<div class="grid">
<div class="col-12">
<div class="card px-6 py-6">
<p-toast></p-toast>
<p-toolbar styleClass="mb-4">
<ng-template #left>
<div class="my-2">
<button pButton pRipple severity="success" class="mr-2" (click)="openNew()">
<i pButtonIcon class="pi plus mr-2"></i>
<span pButtonLabel>New</span>
</button>
<button pButton pRipple severity="danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length">
<i pButtonIcon class="pi pi-trash mr-2"></i>
<span pButtonLabel>Delete</span>
</button>
</div>
</ng-template>
<ng-template #right>
<p-fileupload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
<button pButton pRipple severity="help" (click)="dt.exportCSV()">
<i pButtonIcon class="pi upload"></i>
<span pButtonLabel>Export</span>
</button>
</ng-template>
</p-toolbar>
<p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" selectionMode="multiple" [rowHover]="true" dataKey="id">
<ng-template #caption>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="m-0">Manage Products</h5>
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." class="w-full sm:w-auto"/>
</span>
</div>
</ng-template>
<ng-template #header>
<tr>
<th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th>Image</th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
<th></th>
</tr>
</ng-template>
<ng-template #body let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Code</span>
{{product.code || product.id}}
</td>
<td style="width:14%; min-width:10rem;">
<span class="p-column-title">Name</span>
{{product.name}}
</td>
<td style="width:14%; min-width:10rem;"><span class="p-column-title">Image</span>
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
</td>
<td style="width:14%; min-width:8rem;">
<span class="p-column-title">Price</span>
{{product.price | currency:'USD'}}
</td>
<td style="width:14%; min-width:10rem;">
<span class="p-column-title">Category</span>
{{product.category}}
</td>
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Reviews</span>
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
</td>
<td style="width:14%; min-width: 10rem;"><span class="p-column-title">Status</span>
<span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{{product.inventoryStatus}}</span>
</td>
<td>
<div class="flex">
<button pButton pRipple severity="success" [rounded]="true" class="mr-2" (click)="editProduct(product)">
<i pButtonIcon class="pi pi-pencil"></i>
</button>
<button pButton pRipple severity="warn" [rounded]="true" (click)="deleteProduct(product)">
<i pButtonIcon class="pi pi-trash"></i>
</button>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" header="Product Details" [modal]="true" class="p-fluid">
<ng-template #content>
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" *ngIf="product.image">
<div class="field">
<label for="name">Name</label>
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus [ngClass]="{'ng-invalid ng-dirty' : submitted && !product.name}"/>
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name">Name is required.</small>
</div>
<div class="field">
<label for="description">Description</label>
<textarea id="description" pTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
</div>
<div class="field">
<label for="status">Inventory Status</label>
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" optionValue="label" [options]="statuses" placeholder="Select">
<ng-template #selectedItem>
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toString().toLowerCase()">{{product.inventoryStatus}}</span>
</ng-template>
<ng-template let-option #item>
<span [class]="'product-badge status-' + option.value">{{option.label}}</span>
</ng-template>
</p-select>
</div>
<div class="field">
<label class="mb-3">Category</label>
<div class="formgrid grid">
<div class="field-radiobutton col-6">
<p-radiobutton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radiobutton>
<label for="category1">Accessories</label>
</div>
<div class="field-radiobutton col-6">
<p-radiobutton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radiobutton>
<label for="category2">Clothing</label>
</div>
<div class="field-radiobutton col-6">
<p-radiobutton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radiobutton>
<label for="category3">Electronics</label>
</div>
<div class="field-radiobutton col-6">
<p-radiobutton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radiobutton>
<label for="category4">Fitness</label>
</div>
</div>
</div>
<div class="formgrid grid">
<div class="field col">
<label for="price">Price</label>
<p-inputnumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
</div>
<div class="field col">
<label for="quantity">Quantity</label>
<p-inputnumber id="quantity" [(ngModel)]="product.quantity"></p-inputnumber>
</div>
</div>
</ng-template>
<ng-template #footer>
<button pButton pRipple [text]="true" (click)="hideDialog()">
<i pButtonIcon class="pi times mr-2"></i>
<span pButtonLabel>Cancel</span>
</button>
<button pButton pRipple [text]="true" (click)="saveProduct()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Save</span>
</button>
</ng-template>
</p-dialog>
<p-dialog [(visible)]="deleteProductDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span *ngIf="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div>
<ng-template #footer>
<button pButton pRipple [text]="true" (click)="deleteProductDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDelete()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</button>
</ng-template>
</p-dialog>
<p-dialog [(visible)]="deleteProductsDialog" header="Confirm" [modal]="true" [style]="{width:'450px'}">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span>Are you sure you want to delete selected products?</span>
</div>
<ng-template #footer>
<button pButton pRipple [text]="true" (click)="deleteProductsDialog = false">
<i pButtonIcon class="pi pi-times mr-2"></i>
<span pButtonLabel>No</span>
</button>
<button pButton pRipple [text]="true" (click)="confirmDeleteSelected()">
<i pButtonIcon class="pi pi-check mr-2"></i>
<span pButtonLabel>Yes</span>
</button>
</ng-template>
</p-dialog>
</div>
</div>
`,
providers: [MessageService]
})
export class Crud implements OnInit {
productDialog: boolean = false;
deleteProductDialog: boolean = false;
deleteProductsDialog: boolean = false;
products: Product[] = [];
product: Product = {};
selectedProducts: Product[] = [];
submitted: boolean = false;
cols: any[] = [];
statuses: any[] = [];
rowsPerPageOptions = [5, 10, 20];
private messageService = inject(MessageService);
private productService = inject(ProductService);
ngOnInit() {
this.productService.getProducts().then(data => this.products = data);
this.cols = [
{ field: 'product', header: 'Product' },
{ field: 'price', header: 'Price' },
{ field: 'category', header: 'Category' },
{ field: 'rating', header: 'Reviews' },
{ field: 'inventoryStatus', header: 'Status' }
];
this.statuses = [
{ label: 'INSTOCK', value: 'instock' },
{ label: 'LOWSTOCK', value: 'lowstock' },
{ label: 'OUTOFSTOCK', value: 'outofstock' }
];
}
openNew() {
this.product = {};
this.submitted = false;
this.productDialog = true;
}
deleteSelectedProducts() {
this.deleteProductsDialog = true;
}
editProduct(product: Product) {
this.product = { ...product };
this.productDialog = true;
}
deleteProduct(product: Product) {
this.deleteProductDialog = true;
this.product = { ...product };
}
confirmDeleteSelected() {
this.deleteProductsDialog = false;
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
this.selectedProducts = [];
}
confirmDelete() {
this.deleteProductDialog = false;
this.products = this.products.filter(val => val.id !== this.product.id);
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
this.product = {};
}
hideDialog() {
this.productDialog = false;
this.submitted = false;
}
saveProduct() {
this.submitted = true;
if (this.product.name?.trim()) {
if (this.product.id) {
// @ts-ignore
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
this.products[this.findIndexById(this.product.id)] = this.product;
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
} else {
this.product.id = this.createId();
this.product.code = this.createId();
this.product.image = 'product-placeholder.svg';
// @ts-ignore
this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
this.products.push(this.product);
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
}
this.products = [...this.products];
this.productDialog = false;
this.product = {};
}
}
findIndexById(id: string): number {
let index = -1;
for (let i = 0; i < this.products.length; i++) {
if (this.products[i].id === id) {
index = i;
break;
}
}
return index;
}
createId(): string {
let id = '';
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
}
onGlobalFilter(table: Table, event: Event) {
table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
}
}

159
src/views/pages/documentation.ts Normal file
View File

@@ -0,0 +1,159 @@
import { Component } from '@angular/core';
@Component({
standalone: true,
template: `
<div class="card mb-3">
<div>
<h2>Documentation</h2>
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular
v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local
environment.</p>
<pre class="app-code"><code>cd sakai
npm install
ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start
with the development of your application.</p>
<h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p>
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to \`http://localhost:4200/\`. The app will automatically reload if you change any of the source files.
Run 'ng generate component component-name' to generate a new component. You can also use \`ng generate directive/pipe/service/class/module\`.
Run 'ng build' to build the project. The build artifacts will be stored in the \`dist/\` directory. Use the \`-prod\` flag for a production build.
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Run 'ng help' for more options.</code></pre>
<h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets.
Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
</p>
<h5>Default Configuration</h5>
<p>Initial layout configuration can be defined at the main app component by injecting the <span
class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when
customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of
Angular at <strong class="font-semibold">index.html</strong> by default and
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong
class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially,
it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; LayoutService, AppConfig &#125; from './layout/service/app.layout.service';
&#64;Component(&#123;
selector: 'app-root',
templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit &#123;
constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) &#123; &#125;
ngOnInit(): void &#123;
this.primengConfig.ripple = true; //enables core ripple functionality
//optional configuration with the default configuration
const config: AppConfig = &#123;
ripple: false, //toggles ripple on and off
inputStyle: 'outlined', //default style for input elements
menuMode: 'static', //layout mode of the menu, valid values are "static" and "overlay"
colorScheme: 'light', //color scheme of the template, valid values are "light" and "dark"
theme: 'lara-light-indigo', //default component theme for PrimeNG
scale: 14 //size of the body font size to scale the whole application
&#125;;
this.layoutService.config.set(config);
&#125;
&#125;</code></pre>
<h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span>
file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '&#64;angular/core';
&#64;Component(&#123;
selector: 'app-menu',
templateUrl: './app.menu.component.html'
&#125;)
export class AppMenuComponent implements OnInit &#123;
model: any[] = [];
ngOnInit() &#123;
this.model = [
&#123;
label: 'Home',
items: [
&#123;
label: 'Dashboard',
icon: 'pi pi-fw pi-home',
routerLink: ['/']
&#125;
]
&#125;,
//...
];
&#125;
&#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing
application. We've created a short tutorial with details.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0"
allowfullscreen></iframe>
</div>
<h4>Theme</h4>
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
to your bundle that are located inside <span
class="text-primary font-medium">assets/layout/styles/theme/</span>
folder such as <span
class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
<p>Another alternative would be creating dynamic bundles, please see the <a
href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video
tutorial</a> for an example.</p>
</div>
</div>
`,
styles: `@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}`
})
export class Documentation { }

14
src/views/pages/empty.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
standalone: true,
template: `<div class="grid">
<div class="col-12">
<div class="card">
<h4>Empty Page</h4>
<p>This is your empty page template to start building beautiful applications.</p>
</div>
</div>
</div>`
})
export class Empty { }

379
src/views/pages/landing.ts Normal file
View File

@@ -0,0 +1,379 @@
import {Component, inject} from '@angular/core';
import {Router, RouterModule} from '@angular/router';
import {RippleModule} from 'primeng/ripple';
import {StyleClassModule} from 'primeng/styleclass';
import {ButtonModule} from 'primeng/button';
import {DividerModule} from 'primeng/divider';
import {LayoutService} from '../../app/layout/service/app.layout.service';
@Component({
standalone: true,
imports: [RouterModule, RippleModule, StyleClassModule, ButtonModule, DividerModule],
template:`<div class="surface-0 flex justify-content-center">
<div id="home" class="landing-wrapper 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 mb-3">
<a class="flex align-items-center" href="#">
<img src="assets/layout/images/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.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 surface-0 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:120px">
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
<a (click)="router.navigate(['/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 (click)="router.navigate(['/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 (click)="router.navigate(['/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 (click)="router.navigate(['/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>
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
<button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
<button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
</div>
</div>
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
style="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%); clip-path: ellipse(150% 87% at 93% 13%);">
<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-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
</div>
<div class="flex justify-content-center md:justify-content-end">
<img src="assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto">
</div>
</div>
<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>
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div>
<h5 class="mb-2 text-900">Easy to Use</h5>
<span class="text-600">Posuere morbi leo urna molestie.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div>
<h5 class="mb-2 text-900">Fresh Design</h5>
<span class="text-600">Semper risus in hendrerit.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div>
<h5 class="mb-2 text-900">Well Documented</h5>
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
</div>
<h5 class="mb-2 text-900">Responsive Layout</h5>
<span class="text-600">Nulla malesuada pellentesque elit.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
</div>
<h5 class="mb-2 text-900">Clean Code</h5>
<span class="text-600">Condimentum lacinia quis vel eros.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
</div>
<h5 class="mb-2 text-900">Dark Mode</h5>
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
</div>
<h5 class="mb-2 text-900">Ready to Use</h5>
<span class="text-600">Mauris sit amet massa vitae.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
</div>
<h5 class="mb-2 text-900">Modern Practices</h5>
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
</div>
</div>
</div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
<div class="p-3 surface-card h-full" style="border-radius:8px;">
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
</div>
<h5 class="mb-2 text-900">Privacy</h5>
<span class="text-600">Neque egestas congue quisque.</span>
</div>
</div>
</div>
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
<span class="text-gray-600 text-2xl">Peak Interactive</span>
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“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.”</p>
<img src="assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo">
</div>
</div>
</div>
</div>
<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>
</div>
<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/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile">
</div>
<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>
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">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.</span>
</div>
</div>
<div class="grid my-8 pt-2 md:pt-8">
<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>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">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.</span>
</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/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup">
</div>
</div>
</div>
<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>
</div>
<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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="assets/demo/images/landing/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>
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="assets/demo/images/landing/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>
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</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 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="assets/demo/images/landing/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>
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
</div>
<p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column">
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span>
</li>
<li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<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;">
<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/{{layoutService.config().colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
</a>
</div>
<div class="col-12 md:col-10 lg:col-7">
<div class="grid text-center md:text-left">
<div class="col-12 md:col-3">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/demo/images/landing/new-badge.svg" class="ml-2"/></a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
</div>
<div class="col-12 md:col-3 mt-4 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`,
})
export class Landing {
layoutService = inject(LayoutService);
router = inject(Router);
}

47
src/views/pages/notfound.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Component } from '@angular/core';
import {RouterModule} from '@angular/router';
@Component({
standalone: true,
imports: [RouterModule],
template: `<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
<div class="flex flex-column align-items-center justify-content-center">
<img src="assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
<div 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="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style="border-radius:53px">
<span class="text-blue-500 font-bold text-3xl">404</span>
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-600 mb-5">Requested resource is not available.</div>
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span 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>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</span>
</a>
<a [routerLink]="['/']" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
<span 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>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</span>
</a>
<a [routerLink]="['/']" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1">
<span 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>
</span>
<span class="ml-4 flex flex-column">
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span>
</a>
</div>
</div>
</div>
</div>`,
})
export class Notfound { }

15
src/views/pages/pages.routes.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Routes } from '@angular/router';
import {Documentation} from './documentation';
import {Crud} from './crud';
import {Landing} from './landing';
import {Empty} from './empty';
import {Notfound} from './notfound';
export default [
{ path: 'documentation', component: Documentation},
{ path: 'crud', component: Crud},
{ path: 'landing', component: Landing},
{ path: 'empty', component: Empty},
{ path: 'notfound', component: Notfound},
{ path: '**', redirectTo: '/notfound' }
] as Routes;