migrate to Tailwind CSS v4
This commit is contained in:
@@ -87,7 +87,7 @@ declare type SurfacesType = {
|
||||
</div>
|
||||
`,
|
||||
host: {
|
||||
class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
|
||||
class: 'hidden absolute top-13 right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
|
||||
}
|
||||
})
|
||||
export class AppConfigurator {
|
||||
|
||||
@@ -9,13 +9,13 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
standalone: true,
|
||||
imports: [ButtonModule, RouterModule, RippleModule, AppFloatingConfigurator, ButtonModule],
|
||||
template: ` <app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div 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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
|
||||
<i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
|
||||
<i class="text-orange-500 pi pi-fw pi-lock text-2xl!"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
|
||||
|
||||
@@ -9,13 +9,13 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
standalone: true,
|
||||
template: ` <app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div 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="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
|
||||
<i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
|
||||
<i class="pi pi-fw pi-exclamation-circle text-2xl! text-pink-500"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-muted-color mb-8">Requested resource is not available.</span>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
|
||||
@@ -42,7 +42,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" [(ngModel)]="email" />
|
||||
<input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-120 mb-8" [(ngModel)]="email" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="mb-4" [fluid]="true" [feedback]="false"></p-password>
|
||||
|
||||
@@ -19,7 +19,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<ul class="p-0 mx-0 mt-0 mb-6 list-none">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
<i class="pi pi-dollar text-xl! text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Richard Jones
|
||||
@@ -28,7 +28,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
</li>
|
||||
<li class="flex items-center py-2">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-download !text-xl text-orange-500"></i>
|
||||
<i class="pi pi-download text-xl! text-orange-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
|
||||
</li>
|
||||
@@ -38,7 +38,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<ul class="p-0 m-0 list-none mb-6">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
<i class="pi pi-dollar text-xl! text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Keyser Wick
|
||||
@@ -47,7 +47,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
</li>
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-pink-100 dark:bg-pink-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-question !text-xl text-pink-500"></i>
|
||||
<i class="pi pi-question text-xl! text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Jane Davis
|
||||
@@ -59,13 +59,13 @@ import { MenuModule } from 'primeng/menu';
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-green-100 dark:bg-green-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-arrow-up !text-xl text-green-500"></i>
|
||||
<i class="pi pi-arrow-up text-xl! text-green-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
|
||||
</li>
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-heart !text-xl text-purple-500"></i>
|
||||
<i class="pi pi-heart text-xl! text-purple-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
|
||||
</li>
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Product, ProductService } from '../../service/product.service';
|
||||
standalone: true,
|
||||
selector: 'app-recent-sales-widget',
|
||||
imports: [CommonModule, TableModule, ButtonModule, RippleModule],
|
||||
template: `<div class="card !mb-8">
|
||||
template: `<div class="card mb-8!">
|
||||
<div class="font-semibold text-xl mb-4">Recent Sales</div>
|
||||
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
|
||||
<ng-template #header>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { LayoutService } from '../../../layout/service/layout.service';
|
||||
standalone: true,
|
||||
selector: 'app-revenue-stream-widget',
|
||||
imports: [ChartModule],
|
||||
template: `<div class="card !mb-8">
|
||||
template: `<div class="card mb-8!">
|
||||
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
|
||||
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-100" />
|
||||
</div>`
|
||||
|
||||
@@ -13,7 +13,7 @@ import { CommonModule } from '@angular/common';
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl!"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
@@ -28,7 +28,7 @@ import { CommonModule } from '@angular/common';
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
|
||||
<i class="pi pi-dollar text-orange-500 text-xl!"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
@@ -43,7 +43,7 @@ import { CommonModule } from '@angular/common';
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-users text-cyan-500 !text-xl"></i>
|
||||
<i class="pi pi-users text-cyan-500 text-xl!"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
@@ -58,7 +58,7 @@ import { CommonModule } from '@angular/common';
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 !text-xl"></i>
|
||||
<i class="pi pi-comment text-purple-500 text-xl!"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
|
||||
@@ -16,7 +16,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-users !text-2xl text-yellow-700"></i>
|
||||
<i class="pi pi-fw pi-users text-2xl! text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
|
||||
@@ -28,7 +28,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-palette !text-2xl text-cyan-700"></i>
|
||||
<i class="pi pi-fw pi-palette text-2xl! text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
|
||||
@@ -40,7 +40,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-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>
|
||||
<i class="pi pi-fw pi-map text-2xl! text-indigo-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Well Documented</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
|
||||
@@ -52,7 +52,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-id-card !text-2xl text-slate-700"></i>
|
||||
<i class="pi pi-fw pi-id-card text-2xl! text-slate-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Responsive Layout</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
|
||||
@@ -64,7 +64,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-star !text-2xl text-orange-700"></i>
|
||||
<i class="pi pi-fw pi-star text-2xl! text-orange-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Clean Code</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
|
||||
@@ -76,7 +76,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-moon !text-2xl text-pink-700"></i>
|
||||
<i class="pi pi-fw pi-moon text-2xl! text-pink-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Dark Mode</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
|
||||
@@ -88,7 +88,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-shopping-cart !text-2xl text-teal-700"></i>
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl! text-teal-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Ready to Use</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
|
||||
@@ -100,7 +100,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-globe !text-2xl text-blue-700"></i>
|
||||
<i class="pi pi-fw pi-globe text-2xl! text-blue-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Modern Practices</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
|
||||
@@ -112,7 +112,7 @@ import { CommonModule } from '@angular/common';
|
||||
<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-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-eye !text-2xl text-purple-700"></i>
|
||||
<i class="pi pi-fw pi-eye text-2xl! text-purple-700"></i>
|
||||
</div>
|
||||
<div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Privacy</div>
|
||||
<span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { RippleModule } from 'primeng/ripple';
|
||||
<div class="mx-6 md:mx-20 mt-0 md:mt-6">
|
||||
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||
<button pButton pRipple [rounded]="true" type="button" label="Get Started" class="!text-xl mt-8 !px-4"></button>
|
||||
<button pButton pRipple [rounded]="true" type="button" label="Get Started" class="text-xl! mt-8 px-4!"></button>
|
||||
</div>
|
||||
<div class="flex justify-center md:justify-end">
|
||||
<img src="https://primefaces.org/cdn/templates/sakai/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
|
||||
|
||||
@@ -10,13 +10,13 @@ import { Component } from '@angular/core';
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
|
||||
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
|
||||
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-0" style="border-radius: 8px">
|
||||
<img src="https://primefaces.org/cdn/templates/sakai/landing/mockup.png" class="w-11/12" alt="mockup mobile" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4">
|
||||
<div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-mobile !text-4xl text-purple-700"></i>
|
||||
<i class="pi pi-fw pi-mobile text-4xl! text-purple-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Congue Quisque Egestas</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
|
||||
@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
|
||||
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4">
|
||||
<div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-desktop !text-3xl text-yellow-700"></i>
|
||||
<i class="pi pi-fw pi-desktop text-3xl! text-yellow-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Celerisque Eu Ultrices</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
|
||||
|
||||
@@ -28,8 +28,8 @@ import { ButtonModule } from 'primeng/button';
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span>
|
||||
</a>
|
||||
|
||||
<a pButton [text]="true" severity="secondary" [rounded]="true" pRipple class="lg:!hidden" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars !text-2xl"></i>
|
||||
<a pButton [text]="true" severity="secondary" [rounded]="true" pRipple class="lg:hidden!" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars text-2xl!"></i>
|
||||
</a>
|
||||
|
||||
<div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border">
|
||||
|
||||
@@ -34,7 +34,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-table !text-2xl"></i>
|
||||
<i class="pi pi-fw pi-table text-2xl!"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||
@@ -43,7 +43,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-question-circle !text-2xl"></i>
|
||||
<i class="pi pi-fw pi-question-circle text-2xl!"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
@@ -52,7 +52,7 @@ import { AppFloatingConfigurator } from '../../layout/component/app.floatingconf
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-unlock !text-2xl"></i>
|
||||
<i class="pi pi-fw pi-unlock text-2xl!"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||
|
||||
@@ -176,8 +176,8 @@ import { ToolbarModule } from 'primeng/toolbar';
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-2/12">
|
||||
<p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
|
||||
<p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
|
||||
<p-divider layout="vertical" class="hidden! md:flex!"><b>OR</b></p-divider>
|
||||
<p-divider layout="horizontal" class="flex! md:hidden!" align="center"><b>OR</b></p-divider>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||
<p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full" styleClass="w-full max-w-[17.35rem] mx-auto"></p-button>
|
||||
@@ -194,7 +194,7 @@ import { ToolbarModule } from 'primeng/toolbar';
|
||||
<ng-template #panel>
|
||||
<p-splitter layout="vertical" [panelSizes]="[50, 50]">
|
||||
<ng-template #panel>
|
||||
<div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
|
||||
<div style="grow: 1;" class="flex items-center justify-center">Panel 2</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<p-splitter [panelSizes]="[20, 80]">
|
||||
|
||||
@@ -177,13 +177,13 @@ interface expandedRows {
|
||||
{{ customer.balance | currency: 'USD' : 'symbol' }}
|
||||
</td>
|
||||
<td>
|
||||
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
|
||||
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:bg-surface-900!" />
|
||||
</td>
|
||||
<td>
|
||||
<p-progressbar [value]="customer.activity" [showValue]="false" [style]="{ height: '0.5rem' }" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:!bg-surface-900" />
|
||||
<p-tag [value]="customer.status.toLowerCase()" [severity]="getSeverity(customer.status.toLowerCase())" styleClass="dark:bg-surface-900!" />
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
@@ -282,7 +282,7 @@ interface expandedRows {
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true"></p-rating>
|
||||
</td>
|
||||
<td>
|
||||
<p-tag [value]="product.inventoryStatus.toLowerCase()" [severity]="getSeverity(product.inventoryStatus)" styleClass="dark:!bg-surface-900" />
|
||||
<p-tag [value]="product.inventoryStatus.toLowerCase()" [severity]="getSeverity(product.inventoryStatus)" styleClass="dark:bg-surface-900!" />
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
Reference in New Issue
Block a user