administrator/pas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED Materialize theme

Browse Source
This commit is contained in:
Marek Lesko
2025-10-13 18:18:04 +02:00
parent 9451589a9d
commit 4dda50cbf4
1669 changed files with 146258 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
theme/packages/rtl/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,107 @@
import { Routes } from '@angular/router';
import { BlankComponent } from './layouts/blank/blank.component';
import { FullComponent } from './layouts/full/full.component';
export const routes: Routes = [
{
path: '',
component: FullComponent,
children: [
{
path: '',
redirectTo: '/dashboards/dashboard1',
pathMatch: 'full',
},
{
path: 'starter',
loadChildren: () =>
import('./pages/pages.routes').then((m) => m.PagesRoutes),
},
{
path: 'dashboards',
loadChildren: () =>
import('./pages/dashboards/dashboards.routes').then(
(m) => m.DashboardsRoutes
),
},
{
path: 'forms',
loadChildren: () =>
import('./pages/forms/forms.routes').then((m) => m.FormsRoutes),
},
{
path: 'charts',
loadChildren: () =>
import('./pages/charts/charts.routes').then((m) => m.ChartsRoutes),
},
{
path: 'apps',
loadChildren: () =>
import('./pages/apps/apps.routes').then((m) => m.AppsRoutes),
},
{
path: 'widgets',
loadChildren: () =>
import('./pages/widgets/widgets.routes').then((m) => m.WidgetsRoutes),
},
{
path: 'tables',
loadChildren: () =>
import('./pages/tables/tables.routes').then((m) => m.TablesRoutes),
},
{
path: 'datatable',
loadChildren: () =>
import('./pages/datatable/datatable.routes').then(
(m) => m.DatatablesRoutes
),
},
{
path: 'theme-pages',
loadChildren: () =>
import('./pages/theme-pages/theme-pages.routes').then(
(m) => m.ThemePagesRoutes
),
},
{
path: 'ui-components',
loadChildren: () =>
import('./pages/ui-components/ui-components.routes').then(
(m) => m.UiComponentsRoutes
),
},
],
},
{
path: '',
component: BlankComponent,
children: [
{
path: 'authentication',
loadChildren: () =>
import('./pages/authentication/authentication.routes').then(
(m) => m.AuthenticationRoutes
),
},
{
path: 'landingpage',
loadChildren: () =>
import('./pages/theme-pages/landingpage/landingpage.routes').then(
(m) => m.LandingPageRoutes
),
},
{
path: 'front-pages',
loadChildren: () =>
import('./pages/front-pages/front-pages.routes').then(
(m) => m.FrontPagesRoutes
),
},
],
},
{
path: '**',
redirectTo: 'authentication/error',
},
];

55
theme/packages/rtl/src/app/components/dashboard1/yearly-breakup/yearly-breakup.component.html Normal file
View File

@@ -0,0 +1,55 @@
<mat-card class="cardWithShadow">
<mat-card-header>
<mat-card-title>Yearly Breakup</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col-7">
<h4 class="f-s-24">$36,358</h4>
<div class="d-flex align-items-center m-t-16">
<button
mat-mini-fab
class="bg-light-success text-success shadow-none icon-27 d-flex align-items-center justify-content-center"
>
<i-tabler name="arrow-up-right" class="icon-20 d-flex"></i-tabler>
</button>
<div class="f-s-14 f-w-600 m-l-12">+9%</div>
<div class="f-s-14 f-w-400 m-l-4">last year</div>
</div>
<div class="d-flex align-items-center m-t-32">
<div class="d-flex align-items-center">
<i-tabler
name="circle-filled"
class="text-primary icon-12 d-flex"
></i-tabler>
<div class="f-s-14 f-w-400 m-l-12">2025</div>
</div>
<div class="d-flex align-items-center m-l-16">
<i-tabler
name="circle-filled"
class="text-light-primary icon-12 d-flex"
></i-tabler>
<div class="f-s-14 f-w-400 m-l-12">2024</div>
</div>
</div>
</div>
<div class="col-5">
<!-- ---------------------------- -->
<!-- charts here -->
<!-- ---------------------------- -->
<apx-chart
[series]="yearlyChart.series"
[dataLabels]="yearlyChart.dataLabels"
[chart]="yearlyChart.chart"
[legend]="yearlyChart.legend"
[colors]="yearlyChart.colors"
[stroke]="yearlyChart.stroke"
[tooltip]="yearlyChart.tooltip"
[plotOptions]="yearlyChart.plotOptions"
[responsive]="yearlyChart.responsive"
></apx-chart>
</div>
</div>
</mat-card-content>
</mat-card>

25
theme/packages/rtl/src/app/config.ts Normal file
View File

@@ -0,0 +1,25 @@
export interface AppSettings {
dir: 'ltr' | 'rtl';
theme: string;
sidenavOpened: boolean;
sidenavCollapsed: boolean;
boxed: boolean;
horizontal: boolean;
activeTheme: string;
language: string;
cardBorder: boolean;
navPos: 'side' | 'top';
}
export const defaults: AppSettings = {
dir: 'rtl',
theme: 'light',
sidenavOpened: false,
sidenavCollapsed: false,
boxed: true,
horizontal: false,
cardBorder: false,
activeTheme: 'blue_theme',
language: 'en-us',
navPos: 'side',
};

197
theme/packages/rtl/src/app/layouts/full/full.component.html Normal file
View File

@@ -0,0 +1,197 @@
<span [dir]="options.dir!">
<mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
'sidebarNav-mini':
options.sidenavCollapsed && options.navPos !== 'top' && !resView,
'sidebarNav-horizontal': options.horizontal,
cardBorder: options.cardBorder
}">
<!-- ============================================================== -->
<!-- Vertical Sidebar -->
<!-- ============================================================== -->
@if (!options.horizontal) {
<mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
options.navPos === 'side' &&
options.sidenavOpened &&
!isOver &&
!resView
" (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
<div class="flex-layout">
<app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
<ng-scrollbar class="position-relative" style="height: 100%">
<mat-nav-list class="sidebar-list">
@for(item of navItems; track item) {
<app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
</app-nav-item>
}
</mat-nav-list>
</ng-scrollbar>
<div class="p-24 m-t-auto profile-bar">
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
<div class="m-l-16">
<h4 class="f-w-600">Mathew</h4>
<span class="f-s-12">Designer</span>
</div>
<div class="m-l-auto">
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
</a>
</div>
</div>
</div>
</div>
</mat-sidenav>
}
<!-- ============================================================== -->
<!-- horizontal Sidebar -->
<!-- ============================================================== -->
@if (resView) {
<mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
(openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
<app-sidebar> </app-sidebar>
<ng-scrollbar class="position-relative" style="height: 100%">
<mat-nav-list class="sidebar-list">
@for(item of navItems; track item) {
<app-nav-item [item]="item" (notify)="sidenav.toggle()">
</app-nav-item>
}
</mat-nav-list>
</ng-scrollbar>
<div class="p-24 m-t-auto profile-bar">
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
<div class="m-l-16">
<h4 class="f-w-600">Mathew</h4>
<span class="f-s-12">Designer</span>
</div>
<div class="m-l-auto">
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
</a>
</div>
</div>
</div>
</mat-sidenav>
}
<!-- ============================================================== -->
<!-- Main Content -->
<!-- ============================================================== -->
<mat-sidenav-content class="contentWrapper" #content>
<!-- ============================================================== -->
<!-- VerticalHeader -->
<!-- ============================================================== -->
@if (!options.horizontal) {
<app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
(toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
} @else {
<!-- horizontal header -->
<app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
(optionsChange)="receiveOptions($event)"></app-horizontal-header>
} @if(options.horizontal) {
<app-horizontal-sidebar></app-horizontal-sidebar>
}
<main class="pageWrapper" [ngClass]="{
maxWidth: options.boxed
}">
<app-breadcrumb></app-breadcrumb>
<!-- ============================================================== -->
<!-- Outlet -->
<!-- ============================================================== -->
<router-outlet></router-outlet>
<div class="customizerBtn">
<button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
<mat-icon>settings</mat-icon>
</button>
</div>
</main>
<!-- ------------------------------------------------------------------
Mobile Apps Sidebar
------------------------------------------------------------------ -->
<div [class.open]="isFilterNavOpen" class="filter-sidebar">
<div>
<div class="d-flex justify-content-between align-items-center">
<div class="branding">
@if(options.theme === 'light') {
<a href="/">
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
</a>
} @else {
<a href="/">
<img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
</a>
}
</div>
<button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
</button>
</div>
<mat-accordion>
<mat-expansion-panel class="shadow-none">
<mat-expansion-panel-header>
<mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
</mat-expansion-panel-header>
<div>
<div class="row">
@for(appdd of apps; track appdd.img) {
<div class="col-12 text-hover-primary">
<a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
<button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
<img [src]="appdd.img" width="20" />
</button>
<div>
<h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
{{ appdd.title }}
</h5>
<span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
</div>
</a>
</div>
}
</div>
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
@for(quicklink of quicklinks; track quicklink.title) {
<div class="text-hover-primary">
<a [routerLink]="['quicklink.link']"
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
</div>
}
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="p-x-16">
<a [routerLink]="['/apps/calendar']"
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
<span class="f-s-15 f-w-500 m-l-8">Calendar</span>
</a>
<a [routerLink]="['/apps/chat']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
<span class="f-s-15 f-w-500 m-l-8">Chat</span>
</a>
<a [routerLink]="['/apps/email/inbox']"
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
<span class="f-s-15 f-w-500 m-l-8">Email</span>
</a>
</div>
</div>
</div>
</mat-sidenav-content>
<mat-sidenav #customizerRight mode="over" position="end">
<div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between">
<h3 class="f-s-21 f-w-600">Settings</h3>
<button class="d-lg-none" mat-button (click)="customizerRight.toggle()">
Close
</button>
</div>
<mat-divider></mat-divider>
<app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
</mat-sidenav>
</mat-sidenav-container>
</span>

284
theme/packages/rtl/src/app/layouts/full/full.component.ts Normal file
View File

@@ -0,0 +1,284 @@
import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
import { CoreService } from 'src/app/services/core.service';
import { AppSettings } from 'src/app/config';
import { filter } from 'rxjs/operators';
import { NavigationEnd, Router } from '@angular/router';
import { navItems } from './vertical/sidebar/sidebar-data';
import { NavService } from '../../services/nav.service';
import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
import { RouterModule } from '@angular/router';
import { MaterialModule } from 'src/app/material.module';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './vertical/sidebar/sidebar.component';
import { NgScrollbarModule } from 'ngx-scrollbar';
import { TablerIconsModule } from 'angular-tabler-icons';
import { HeaderComponent } from './vertical/header/header.component';
import { AppHorizontalHeaderComponent } from './horizontal/header/header.component';
import { AppHorizontalSidebarComponent } from './horizontal/sidebar/sidebar.component';
import { AppBreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
import { CustomizerComponent } from './shared/customizer/customizer.component';
const MOBILE_VIEW = 'screen and (max-width: 768px)';
const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
const MONITOR_VIEW = 'screen and (min-width: 1024px)';
const BELOWMONITOR = 'screen and (max-width: 1023px)';
// for mobile app sidebar
interface apps {
id: number;
img: string;
title: string;
subtitle: string;
link: string;
}
interface quicklinks {
id: number;
title: string;
link: string;
}
@Component({
selector: 'app-full',
imports: [
RouterModule,
AppNavItemComponent,
MaterialModule,
CommonModule,
SidebarComponent,
NgScrollbarModule,
TablerIconsModule,
HeaderComponent,
AppHorizontalHeaderComponent,
AppHorizontalSidebarComponent,
AppBreadcrumbComponent,
CustomizerComponent,
],
templateUrl: './full.component.html',
encapsulation: ViewEncapsulation.None
})
export class FullComponent implements OnInit {
navItems = navItems;
@ViewChild('leftsidenav')
public sidenav: MatSidenav;
resView = false;
@ViewChild('content', { static: true }) content!: MatSidenavContent;
//get options from service
options = this.settings.getOptions();
private layoutChangesSubscription = Subscription.EMPTY;
private isMobileScreen = false;
private isContentWidthFixed = true;
private isCollapsedWidthFixed = false;
private htmlElement!: HTMLHtmlElement;
get isOver(): boolean {
return this.isMobileScreen;
}
get isTablet(): boolean {
return this.resView;
}
// for mobile app sidebar
apps: apps[] = [
{
id: 1,
img: '/assets/images/svgs/icon-dd-chat.svg',
title: 'Chat Application',
subtitle: 'Messages & Emails',
link: '/apps/chat',
},
{
id: 2,
img: '/assets/images/svgs/icon-dd-cart.svg',
title: 'Todo App',
subtitle: 'Completed task',
link: '/apps/todo',
},
{
id: 3,
img: '/assets/images/svgs/icon-dd-invoice.svg',
title: 'Invoice App',
subtitle: 'Get latest invoice',
link: '/apps/invoice',
},
{
id: 4,
img: '/assets/images/svgs/icon-dd-date.svg',
title: 'Calendar App',
subtitle: 'Get Dates',
link: '/apps/calendar',
},
{
id: 5,
img: '/assets/images/svgs/icon-dd-mobile.svg',
title: 'Contact Application',
subtitle: '2 Unsaved Contacts',
link: '/apps/contacts',
},
{
id: 6,
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
title: 'Tickets App',
subtitle: 'Create new ticket',
link: '/apps/tickets',
},
{
id: 7,
img: '/assets/images/svgs/icon-dd-message-box.svg',
title: 'Email App',
subtitle: 'Get new emails',
link: '/apps/email/inbox',
},
{
id: 8,
img: '/assets/images/svgs/icon-dd-application.svg',
title: 'Courses',
subtitle: 'Create new course',
link: '/apps/courses',
},
];
quicklinks: quicklinks[] = [
{
id: 1,
title: 'Pricing Page',
link: '/theme-pages/pricing',
},
{
id: 2,
title: 'Authentication Design',
link: '/authentication/login',
},
{
id: 3,
title: 'Register Now',
link: '/authentication/side-register',
},
{
id: 4,
title: '404 Error Page',
link: '/authentication/error',
},
{
id: 5,
title: 'Notes App',
link: '/apps/notes',
},
{
id: 6,
title: 'Employee App',
link: '/apps/employee',
},
{
id: 7,
title: 'Todo Application',
link: '/apps/todo',
},
{
id: 8,
title: 'Treeview',
link: '/theme-pages/treeview',
},
];
constructor(
private settings: CoreService,
private mediaMatcher: MediaMatcher,
private router: Router,
private breakpointObserver: BreakpointObserver,
private navService: NavService, private cdr: ChangeDetectorRef
) {
this.htmlElement = document.querySelector('html')!;
this.layoutChangesSubscription = this.breakpointObserver
.observe([MOBILE_VIEW, TABLET_VIEW, MONITOR_VIEW, BELOWMONITOR])
.subscribe((state) => {
// SidenavOpened must be reset true when layout changes
this.options.sidenavOpened = true;
this.isMobileScreen = state.breakpoints[BELOWMONITOR];
if (this.options.sidenavCollapsed == false) {
this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
}
this.isContentWidthFixed = state.breakpoints[MONITOR_VIEW];
this.resView = state.breakpoints[BELOWMONITOR];
});
// Initialize project theme with options
this.receiveOptions(this.options);
// This is for scroll to top
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe((e) => {
this.content.scrollTo({ top: 0 });
});
}
isFilterNavOpen = false;
toggleFilterNav() {
this.isFilterNavOpen = !this.isFilterNavOpen;
console.log('Sidebar open:', this.isFilterNavOpen);
this.cdr.detectChanges(); // Ensures Angular updates the view
}
ngOnInit(): void {}
ngOnDestroy() {
this.layoutChangesSubscription.unsubscribe();
}
toggleCollapsed() {
this.isContentWidthFixed = false;
this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
this.resetCollapsedState();
}
resetCollapsedState(timer = 400) {
setTimeout(() => this.settings.setOptions(this.options), timer);
}
onSidenavClosedStart() {
this.isContentWidthFixed = false;
}
onSidenavOpenedChange(isOpened: boolean) {
this.isCollapsedWidthFixed = !this.isOver;
this.options.sidenavOpened = isOpened;
this.settings.setOptions(this.options);
}
receiveOptions(options: AppSettings): void {
this.toggleDarkTheme(options);
this.toggleColorsTheme(options);
}
toggleDarkTheme(options: AppSettings) {
if (options.theme === 'dark') {
this.htmlElement.classList.add('dark-theme');
this.htmlElement.classList.remove('light-theme');
} else {
this.htmlElement.classList.remove('dark-theme');
this.htmlElement.classList.add('light-theme');
}
}
toggleColorsTheme(options: AppSettings) {
// Remove any existing theme class dynamically
this.htmlElement.classList.forEach((className) => {
if (className.endsWith('_theme')) {
this.htmlElement.classList.remove(className);
}
});
// Add the selected theme class
this.htmlElement.classList.add(options.activeTheme);
}
}

296
theme/packages/rtl/src/app/layouts/full/horizontal/header/header.component.html Normal file
View File

@@ -0,0 +1,296 @@
<mat-toolbar class="topbar horizontal-topbar">
<div class="container">
<div class="d-none d-sm-flex branding">
<app-branding></app-branding>
</div>
<!-- Mobile Menu -->
<button
mat-icon-button
(click)="toggleMobileNav.emit()"
class="d-block d-lg-none"
>
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
</button>
<!-- --------------------------------------------------------------- -->
<!-- --------------------------------------------------------------- -->
<!-- Search -->
<!-- --------------------------------------------------------------- -->
<button mat-icon-button (click)="openDialog()" class="d-flex">
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
</button>
<div class="d-none d-lg-flex">
<!-- --------------------------------------------------------------- -->
<!-- Links -->
<!-- --------------------------------------------------------------- -->
<button
mat-button
[matMenuTriggerFor]="appsmenu"
aria-label="Notifications"
>
<div class="d-flex align-items-center">
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
</div>
</button>
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
<div class="row">
<div class="col-sm-8 b-r-1 p-r-0">
<div class="p-32 p-b-0">
<div class="row">
@for(appdd of apps; track appdd.title) {
<div class="col-sm-6 text-hover-primary">
<a
[routerLink]="[appdd.link]"
class="d-flex align-items-center text-decoration-none m-b-24"
>
<span
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
>
<img [src]="appdd.img" width="20" />
</span>
<div class="m-l-16">
<h5
class="f-s-14 f-w-600 m-0 textprimary hover-text"
>
{{ appdd.title }}
</h5>
<span class="text-body f-s-12">{{
appdd.subtitle
}}</span>
</div>
</a>
</div>
}
</div>
</div>
<div
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
>
<span
class="d-flex align-items-center f-s-16 f-w-500"
>
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler
>Frequently Asked Questions
</span>
<a
[routerLink]="['/theme-pages/faq']"
mat-flat-button
color="primary"
>Check</a
>
</div>
</div>
<div class="col-sm-4">
<div class="p-x-16 p-y-32">
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
@for(quicklink of quicklinks; track quicklink.title) {
<div class="text-hover-primary">
<a
[routerLink]="[quicklink.link]"
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
>{{ quicklink.title }}</a
>
</div>
}
</div>
</div>
</div>
</mat-menu>
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
</div>
<span class="flex-1-auto"></span>
<!-- Mobile Menu -->
<button
mat-icon-button
(click)="toggleMobileFilterNav.emit()"
class="d-flex d-lg-none justify-content-center"
>
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
</button>
<!-- --------------------------------------------------------------- -->
<!-- langugage Dropdown -->
<!-- --------------------------------------------------------------- -->
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
<img
[src]="selectedLanguage.icon"
class="rounded-circle object-cover icon-20"
/>
</button>
<mat-menu #flags="matMenu" class="cardWithShadow">
@for(lang of languages; track lang.icon) {
<button mat-menu-item (click)="changeLanguage(lang)">
<div class="d-flex align-items-center">
<img
[src]="lang.icon"
class="rounded-circle object-cover m-r-8 icon-20"
/>
<span class=" f-s-14">{{ lang.language }}</span>
</div>
</button>
}
</mat-menu>
@if(options.theme=='light'){
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
</button>
}@else{
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
</button>
}
<!-- --------------------------------------------------------------- -->
<!-- Notification Dropdown -->
<!-- --------------------------------------------------------------- -->
<button
mat-icon-button matBadge="5"
[matMenuTriggerFor]="notificationmenu"
aria-label="Notifications" class="m-x-5 notification-badge"
>
<i-tabler
class="d-flex"
name="bell"
></i-tabler>
</button>
<mat-menu
#notificationmenu="matMenu"
xPosition="before"
class="topbar-dd cardWithShadow"
>
<div class="d-flex align-items-center p-x-32 p-y-16">
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
<span class="m-l-auto">
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
>5 new</span
>
</span>
</div>
@for(notification of notifications; track notification.title) {
<button mat-menu-item class="p-x-32 p-y-16">
<div class="d-flex align-items-center">
<img [src]="notification.img" class="rounded-circle" width="48" />
<div class="m-l-16">
<h5 class="f-s-14 f-w-600 m-0 ">
{{ notification.title }}
</h5>
<span>{{ notification.subtitle }}</span>
</div>
</div>
</button>
}
<div class="p-y-12 p-x-32">
<button mat-stroked-button color="primary" class="w-100">
See all notifications
</button>
</div>
</mat-menu>
<!-- --------------------------------------------------------------- -->
<!-- profile Dropdown -->
<!-- --------------------------------------------------------------- -->
<button
mat-icon-button
[matMenuTriggerFor]="profilemenu"
aria-label="Notifications"
>
<img
src="/assets/images/profile/user-1.jpg"
class="rounded-circle object-cover icon-35 profile-dd"
width="35"
/>
</button>
<mat-menu
#profilemenu="matMenu"
xPosition="before"
class="topbar-dd cardWithShadow"
>
<div class="p-x-32 p-y-16">
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
<img
src="/assets/images/profile/user-1.jpg"
class="rounded-circle"
width="95"
/>
<div class="m-l-16">
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
<span class="f-s-14 d-block m-b-4">Designer</span>
<span class="d-flex align-items-center">
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
info&#64;modernize.com
</span>
</div>
</div>
</div>
<div class="p-x-32">
@for(profile of profiledd; track profile.title) {
<a
class="p-y-16 text-decoration-none d-block text-hover-primary"
[routerLink]="[profile.link]"
>
<div class="d-flex align-items-center">
<button
mat-mini-fab
class="text-primary bg-light-primary shadow-none rounded"
>
<img [src]="profile.img" width="20" />
</button>
<div class="m-l-16">
<h5
class="f-s-14 f-w-600 m-0 textprimary hover-text"
>
{{ profile.title }}
</h5>
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
</div>
</div>
</a>
}
<!-- upgrade -->
<div
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
>
<div class="d-flex align-items-center">
<div>
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
Unlimited <br />
Access
</h5>
<button mat-flat-button color="primary">Upgrade</button>
</div>
<div class="m-l-auto">
<img
src="/assets/images/backgrounds/unlimited-bg.png"
alt="upgrade-bg"
class="upgrade-bg"
/>
</div>
</div>
</div>
</div>
<div class="p-y-12 p-x-32">
<a
[routerLink]="['/authentication/login']"
mat-stroked-button
color="primary"
class="w-100"
>Logout</a
>
</div>
</mat-menu>
</div>
</mat-toolbar>

633
theme/packages/rtl/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts Normal file
View File

@@ -0,0 +1,633 @@
import { NavItem } from '../../vertical/sidebar/nav-item/nav-item';
export const navItems: NavItem[] = [
{
navCap: 'Home',
},
{
displayName: 'Dashboards',
iconName: 'home',
route: 'dashboards',
children: [
{
displayName: 'Analytical',
iconName: 'point',
route: 'dashboards/dashboard1',
},
{
displayName: 'eCommerce',
iconName: 'point',
route: 'dashboards/dashboard2',
},
],
},
{
displayName: 'Frontend pages',
iconName: 'app-window',
route: 'front-pages',
children: [
{
displayName: 'Home Page',
iconName: 'point',
route: 'front-pages/homepage',
} ,
{
displayName: 'About Us',
iconName: 'point',
route: 'front-pages/about',
} ,
{
displayName: 'Blog',
iconName: 'point',
route: 'front-pages/blog',
} ,
{
displayName: 'Blog Details',
iconName: 'point',
route: 'front-pages/blog-details',
} ,
{
displayName: 'Portfolio',
iconName: 'point',
route: 'front-pages/portfolio',
},
{
displayName: 'Pricing',
iconName: 'point',
route: 'front-pages/pricing',
},
{
displayName: 'Contact',
iconName: 'point',
route: 'front-pages/contact',
}
]
},
{
displayName: 'Apps',
iconName: 'apps',
route: 'apps',
ddType: '',
children: [
{
displayName: 'Chat',
iconName: 'point',
route: 'apps/chat',
},
{
displayName: 'Calendar',
iconName: 'point',
route: 'apps/calendar',
},
{
displayName: 'Email',
iconName: 'point',
route: 'apps/email/inbox',
},
{
displayName: 'Contacts',
iconName: 'point',
route: 'apps/contacts',
},
{
displayName: 'Contact List',
iconName: 'point',
route: 'apps/contact-list',
},
{
displayName: 'Courses',
iconName: 'point',
route: 'apps/courses',
},
{
displayName: 'Employee',
iconName: 'point',
route: 'apps/employee',
},
{
displayName: 'Notes',
iconName: 'point',
route: 'apps/notes',
},
{
displayName: 'Tickets',
iconName: 'point',
route: 'apps/tickets',
},
{
displayName: 'Invoice',
iconName: 'point',
route: 'apps/invoice',
},
{
displayName: 'ToDo',
iconName: 'point',
route: 'apps/todo',
},
{
displayName: 'Kanban',
iconName: 'point',
route: 'apps/kanban',
},
{
displayName: 'Blog',
iconName: 'point',
route: 'apps/blog',
children: [
{
displayName: 'Post',
iconName: 'point',
route: 'apps/blog/post',
},
{
displayName: 'Detail',
iconName: 'point',
route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
},
],
},
{
displayName: 'User Profile',
iconName: 'point',
route: 'apps/profile-details',
children: [
{
displayName: 'Profile',
iconName: 'point',
route: 'apps/profile-details/profile',
},
{
displayName: 'Followers',
iconName: 'point',
route: 'apps/profile-details/followers',
},
{
displayName: 'Friends',
iconName: 'point',
route: 'apps/profile-details/friends',
},
{
displayName: 'Gellary',
iconName: 'point',
route: 'apps/profile-details/gallery',
},
],
},
{
displayName: 'Ecommerce',
iconName: 'point',
route: 'apps/product',
children: [
{
displayName: 'Product List',
iconName: 'point',
route: 'apps/product/product-list',
},
{
displayName: 'Add Product',
iconName: 'point',
route: 'apps/product/add-product',
},
{
displayName: 'Edit Product',
iconName: 'point',
route: 'apps/product/edit-product',
},
{
displayName: 'Shop',
iconName: 'point',
route: 'apps/product/shop',
},
],
},
],
},
{
displayName: 'Ui',
iconName: 'components',
route: 'ui-components',
ddType: '',
children: [
{
displayName: 'Badge',
iconName: 'point',
route: 'ui-components/badge',
},
{
displayName: 'Expansion Panel',
iconName: 'point',
route: 'ui-components/expansion',
},
{
displayName: 'Chips',
iconName: 'point',
route: 'ui-components/chips',
},
{
displayName: 'Dialog',
iconName: 'point',
route: 'ui-components/dialog',
},
{
displayName: 'Lists',
iconName: 'point',
route: 'ui-components/lists',
},
{
displayName: 'Divider',
iconName: 'point',
route: 'ui-components/divider',
},
{
displayName: 'Menu',
iconName: 'point',
route: 'ui-components/menu',
},
{
displayName: 'Paginator',
iconName: 'point',
route: 'ui-components/paginator',
},
{
displayName: 'Progress Bar',
iconName: 'point',
route: 'ui-components/progress',
},
{
displayName: 'Progress Spinner',
iconName: 'point',
route: 'ui-components/progress-spinner',
},
{
displayName: 'Ripples',
iconName: 'point',
route: 'ui-components/ripples',
},
{
displayName: 'Slide Toggle',
iconName: 'point',
route: 'ui-components/slide-toggle',
},
{
displayName: 'Slider',
iconName: 'point',
route: 'ui-components/slider',
},
{
displayName: 'Snackbar',
iconName: 'point',
route: 'ui-components/snackbar',
},
{
displayName: 'Tabs',
iconName: 'point',
route: 'ui-components/tabs',
},
{
displayName: 'Toolbar',
iconName: 'point',
route: 'ui-components/toolbar',
},
{
displayName: 'Tooltips',
iconName: 'point',
route: 'ui-components/tooltips',
},
],
},
{
displayName: 'Pages',
iconName: 'clipboard',
route: 'theme-pages',
ddType: '',
children: [
{
displayName: 'Treeview',
iconName: 'point',
route: 'theme-pages/treeview',
},
{
displayName: 'Pricing',
iconName: 'point',
route: 'theme-pages/pricing',
},
{
displayName: 'Account Setting',
iconName: 'point',
route: 'theme-pages/account-setting',
},
{
displayName: 'FAQ',
iconName: 'point',
route: 'theme-pages/faq',
},
{
displayName: 'Landingpage',
iconName: 'point',
route: 'landingpage',
},
{
displayName: 'Widgets',
iconName: 'point',
route: 'widgets',
children: [
{
displayName: 'Cards',
iconName: 'point',
route: 'widgets/cards',
},
{
displayName: 'Banners',
iconName: 'point',
route: 'widgets/banners',
},
{
displayName: 'Charts',
iconName: 'point',
route: 'widgets/charts',
},
],
},
{
displayName: 'Charts',
iconName: 'point',
route: 'charts',
children: [
{
displayName: 'Line',
iconName: 'point',
route: '/charts/line',
},
{
displayName: 'Gredient',
iconName: 'point',
route: '/charts/gredient',
},
{
displayName: 'Area',
iconName: 'point',
route: '/charts/area',
},
{
displayName: 'Candlestick',
iconName: 'point',
route: '/charts/candlestick',
},
{
displayName: 'Column',
iconName: 'point',
route: '/charts/column',
},
{
displayName: 'Doughnut & Pie',
iconName: 'point',
route: '/charts/doughnut-pie',
},
{
displayName: 'Radialbar & Radar',
iconName: 'point',
route: '/charts/radial-radar',
},
],
},
{
displayName: 'Auth',
iconName: 'point',
route: '/',
children: [
{
displayName: 'Login',
iconName: 'point',
route: '/authentication',
children: [
{
displayName: 'Login 1',
iconName: 'point',
route: '/authentication/login',
},
{
displayName: 'Boxed Login',
iconName: 'point',
route: '/authentication/boxed-login',
},
],
},
{
displayName: 'Register',
iconName: 'point',
route: '/authentication',
children: [
{
displayName: 'Login 1',
iconName: 'point',
route: '/authentication/side-register',
},
{
displayName: 'Boxed Login',
iconName: 'point',
route: '/authentication/boxed-register',
},
],
},
{
displayName: 'Forgot Password',
iconName: 'point',
route: '/authentication',
children: [
{
displayName: 'Side Forgot Password',
iconName: 'point',
route: '/authentication/side-forgot-pwd',
},
{
displayName: 'Boxed Forgot Password',
iconName: 'point',
route: '/authentication/boxed-forgot-pwd',
},
],
},
{
displayName: 'Two Steps',
iconName: 'point',
route: '/authentication',
children: [
{
displayName: 'Side Two Steps',
iconName: 'point',
route: '/authentication/side-two-steps',
},
{
displayName: 'Boxed Two Steps',
iconName: 'point',
route: '/authentication/boxed-two-steps',
},
],
},
{
displayName: 'Error',
iconName: 'point',
route: '/authentication/error',
},
{
displayName: 'Maintenance',
iconName: 'point',
route: '/authentication/maintenance',
},
],
},
],
},
{
displayName: 'Forms',
iconName: 'file-description',
route: 'forms',
ddType: '',
children: [
{
displayName: 'Form elements',
iconName: 'point',
route: 'forms/forms-elements',
children: [
{
displayName: 'Autocomplete',
iconName: 'point',
route: 'forms/forms-elements/autocomplete',
},
{
displayName: 'Button',
iconName: 'point',
route: 'forms/forms-elements/button',
},
{
displayName: 'Checkbox',
iconName: 'point',
route: 'forms/forms-elements/checkbox',
},
{
displayName: 'Radio',
iconName: 'point',
route: 'forms/forms-elements/radio',
},
{
displayName: 'Datepicker',
iconName: 'point',
route: 'forms/forms-elements/datepicker',
},
],
},
{
displayName: 'Form Layouts',
iconName: 'point',
route: '/forms/form-layouts',
},
{
displayName: 'Form Horizontal',
iconName: 'point',
route: '/forms/form-horizontal',
},
{
displayName: 'Form Vertical',
iconName: 'point',
route: '/forms/form-vertical',
},
{
displayName: 'Form Wizard',
iconName: 'point',
route: '/forms/form-wizard',
},
{
displayName: 'Toastr',
iconName: 'point',
route: '/forms/form-toastr',
},
{
displayName: 'Editor',
iconName: 'point',
route: '/forms/form-editor',
},
],
},
{
displayName: 'Tables',
iconName: 'layout',
route: 'tables',
ddType: '',
children: [
{
displayName: 'Basic Table',
iconName: 'point',
route: 'tables/basic-table',
},
{
displayName: 'Dynamic Table',
iconName: 'point',
route: 'tables/dynamic-table',
},
{
displayName: 'Expand Table',
iconName: 'point',
route: 'tables/expand-table',
},
{
displayName: 'Filterable Table',
iconName: 'point',
route: 'tables/filterable-table',
},
{
displayName: 'Footer Row Table',
iconName: 'point',
route: 'tables/footer-row-table',
},
{
displayName: 'HTTP Table',
iconName: 'point',
route: 'tables/http-table',
},
{
displayName: 'Mix Table',
iconName: 'point',
route: 'tables/mix-table',
},
{
displayName: 'Multi Header Footer',
iconName: 'point',
route: 'tables/multi-header-footer-table',
},
{
displayName: 'Pagination Table',
iconName: 'point',
route: 'tables/pagination-table',
},
{
displayName: 'Row Context Table',
iconName: 'point',
route: 'tables/row-context-table',
},
{
displayName: 'Selection Table',
iconName: 'point',
route: 'tables/selection-table',
},
{
displayName: 'Sortable Table',
iconName: 'point',
route: 'tables/sortable-table',
},
{
displayName: 'Sticky Column',
iconName: 'point',
route: 'tables/sticky-column-table',
},
{
displayName: 'Sticky Header Footer',
iconName: 'point',
route: 'tables/sticky-header-footer-table',
},
{
displayName: 'Data table',
iconName: 'point',
route: '/datatable/kichen-sink',
},
],
},
];

48
theme/packages/rtl/src/app/layouts/full/horizontal/sidebar/sidebar.component.ts Normal file
View File

@@ -0,0 +1,48 @@
import {
Component,
OnInit,
Input,
ChangeDetectorRef,
OnChanges,
} from '@angular/core';
import { navItems } from './sidebar-data';
import { Router } from '@angular/router';
import { NavService } from '../../../../services/nav.service';
import { MediaMatcher } from '@angular/cdk/layout';
import { AppHorizontalNavItemComponent } from './nav-item/nav-item.component';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-horizontal-sidebar',
imports: [AppHorizontalNavItemComponent, CommonModule],
templateUrl: './sidebar.component.html',
})
export class AppHorizontalSidebarComponent implements OnInit {
navItems = navItems;
parentActive = '';
mobileQuery: MediaQueryList;
private _mobileQueryListener: () => void;
constructor(
public navService: NavService,
public router: Router,
media: MediaMatcher,
changeDetectorRef: ChangeDetectorRef
) {
this.mobileQuery = media.matchMedia('(min-width: 1100px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
this.router.events.subscribe(
() => (this.parentActive = this.router.url.split('/')[1])
);
}
ngOnInit(): void {
this.parentActive = this.router.url.split('/')[1];
this.router.events.subscribe(() => {
this.parentActive = this.router.url.split('/')[1];
});
}
}

43
theme/packages/rtl/src/app/layouts/full/shared/breadcrumb/breadcrumb.component.ts Normal file
View File

@@ -0,0 +1,43 @@
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
import { TablerIconsModule } from 'angular-tabler-icons';
@Component({
selector: 'app-breadcrumb',
imports: [RouterModule, TablerIconsModule],
templateUrl: './breadcrumb.component.html',
styleUrls: []
})
export class AppBreadcrumbComponent {
// @Input() layout;
pageInfo: Data | any = Object.create(null);
myurl: any = this.router.url.slice(1).split('/');
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.pipe(map(() => this.activatedRoute))
.pipe(
map((route) => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
})
)
.pipe(filter((route) => route.outlet === 'primary'))
.pipe(mergeMap((route) => route.data))
// tslint:disable-next-line - Disables all
.subscribe((event) => {
// tslint:disable-next-line - Disables all
this.titleService.setTitle(event['title'] + ' - Angular 20');
this.pageInfo = event;
});
}
}

301
theme/packages/rtl/src/app/layouts/full/vertical/header/header.component.html Normal file
View File

@@ -0,0 +1,301 @@
<mat-toolbar class="topbar">
<!-- --------------------------------------------------------------- -->
<!-- Desktop Menu -->
@if(showToggle) {
<button
mat-icon-button
(click)="toggleCollapsed.emit()"
class="d-flex justify-content-center"
>
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
</button>
}
<!-- Mobile Menu -->
@if(!showToggle) {
<button
mat-icon-button
(click)="toggleMobileNav.emit()"
class="d-flex justify-content-center"
>
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
</button>
}
<!-- --------------------------------------------------------------- -->
<!-- --------------------------------------------------------------- -->
<!-- Search -->
<!-- --------------------------------------------------------------- -->
<button
mat-icon-button
(click)="openDialog()"
class="d-flex justify-content-center"
>
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
</button>
<div class="d-none d-lg-flex">
<!-- --------------------------------------------------------------- -->
<!-- Links -->
<!-- --------------------------------------------------------------- -->
<button
mat-button
[matMenuTriggerFor]="appsmenu"
aria-label="Notifications"
>
<div class="d-flex align-items-center">
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
</div>
</button>
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
<div class="row">
<div class="col-sm-8 b-r-1 p-r-0">
<div class="p-32 p-b-0">
<div class="row">
@for(appdd of apps; track appdd.title) {
<div class="col-sm-6 text-hover-primary">
<a
[routerLink]="[appdd.link]"
class="d-flex align-items-center text-decoration-none m-b-24"
>
<span
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
>
<img [src]="appdd.img" width="20" />
</span>
<div class="m-l-16">
<h5
class="f-s-14 f-w-600 m-0 textprimary hover-text"
>
{{ appdd.title }}
</h5>
<span class="f-s-12 text-body">{{ appdd.subtitle }}</span>
</div>
</a>
</div>
}
</div>
</div>
<div
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
>
<span
class="d-flex align-items-center f-s-16 f-w-500"
>
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
Asked Questions
</span>
<a
[routerLink]="['/theme-pages/faq']"
mat-flat-button
color="primary"
>Check</a
>
</div>
</div>
<div class="col-sm-4">
<div class="p-x-16 p-y-32">
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
@for(quicklink of quicklinks; track quicklink.title) {
<div class="text-hover-primary">
<a
[routerLink]="[quicklink.link]"
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
>{{ quicklink.title }}</a
>
</div>
}
</div>
</div>
</div>
</mat-menu>
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
</div>
<span class="flex-1-auto"></span>
<!-- Mobile Menu -->
<button
mat-icon-button
(click)="toggleMobileFilterNav.emit()"
class="d-flex d-lg-none justify-content-center"
>
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
</button>
<!-- --------------------------------------------------------------- -->
<!-- langugage Dropdown -->
<!-- --------------------------------------------------------------- -->
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
<img
[src]="selectedLanguage.icon"
class="rounded-circle object-cover icon-20"
/>
</button>
<mat-menu #flags="matMenu" class="cardWithShadow">
@for(lang of languages; track lang.icon) {
<button mat-menu-item (click)="changeLanguage(lang)">
<div class="d-flex align-items-center">
<img
[src]="lang.icon"
class="rounded-circle object-cover m-r-8 icon-20"
/>
<span class=" f-s-14">{{ lang.language }}</span>
</div>
</button>
}
</mat-menu>
@if(options.theme=='light'){
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
</button>
}@else{
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
</button>
}
<!-- --------------------------------------------------------------- -->
<!-- Notification Dropdown -->
<!-- --------------------------------------------------------------- -->
<button
mat-icon-button matBadge="5"
[matMenuTriggerFor]="notificationmenu"
aria-label="Notifications" class="m-x-5 notification-badge"
>
<i-tabler
class="d-flex"
name="bell"
></i-tabler>
</button>
<mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
<div class="d-flex align-items-center p-x-32 p-y-16">
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
<span class="m-l-auto">
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
>5 new</span
>
</span>
</div>
@for(notification of notifications; track notification.title) {
<button mat-menu-item class="p-x-32 p-y-16">
<div class="d-flex align-items-center">
<img [src]="notification.img" class="rounded-circle" width="48" />
<div class="m-l-16">
<h5 class="f-s-14 f-w-600 m-0 ">
{{ notification.title }}
</h5>
<span>{{ notification.subtitle }}</span>
</div>
</div>
</button>
}
<div class="p-y-12 p-x-32">
<button mat-stroked-button color="primary" class="w-100">
See all notifications
</button>
</div>
</mat-menu>
<!-- --------------------------------------------------------------- -->
<!-- profile Dropdown -->
<!-- --------------------------------------------------------------- -->
<button
mat-icon-button
[matMenuTriggerFor]="profilemenu"
aria-label="Notifications" class="m-l-8"
>
<img
src="/assets/images/profile/user-1.jpg"
class="rounded-circle object-cover icon-35 profile-dd"
width="35"
/>
</button>
<mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
<ng-scrollbar class="position-relative" style="height: 647px">
<div class="p-x-32 p-y-16">
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
<img
src="/assets/images/profile/user-1.jpg"
class="rounded-circle"
width="95"
/>
<div class="m-l-16">
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
<span class="f-s-14 d-block m-b-4">Designer</span>
<span class="d-flex align-items-center">
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
info&#64;modernize.com
</span>
</div>
</div>
</div>
<div class="p-x-32">
@for(profile of profiledd; track profile.title) {
<a
class="p-y-16 text-decoration-none d-block text-hover-primary"
[routerLink]="[profile.link]"
>
<div class="d-flex align-items-center">
<button
mat-mini-fab
class="text-primary bg-light shadow-none rounded"
>
<img [src]="profile.img" width="20" />
</button>
<div class="m-l-16">
<h5
class="f-s-14 f-w-600 m-0 textprimary hover-text"
>
{{ profile.title }}
</h5>
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
</div>
</div>
</a>
}
<!-- upgrade -->
<div
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
>
<div class="d-flex align-items-center">
<div>
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
Unlimited <br />
Access
</h5>
<button mat-flat-button color="primary">Upgrade</button>
</div>
<div class="m-l-auto">
<img
src="/assets/images/backgrounds/unlimited-bg.png"
alt="upgrade-bg"
class="upgrade-bg"
/>
</div>
</div>
</div>
</div>
<div class="p-y-12 p-x-32">
<a
[routerLink]="['/authentication/login']"
mat-stroked-button
color="primary"
class="w-100"
>Logout</a
>
</div>
</ng-scrollbar>
</mat-menu>
</mat-toolbar>

103
theme/packages/rtl/src/app/layouts/full/vertical/sidebar/nav-item/nav-item.component.ts Normal file
View File

@@ -0,0 +1,103 @@
import {
Component,
HostBinding,
Input,
OnInit,
OnChanges,
Output,
EventEmitter,
} from '@angular/core';
import { NavItem } from './nav-item';
import { Router } from '@angular/router';
import { NavService } from '../../../../../services/nav.service';
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import { TranslateModule } from '@ngx-translate/core';
import { TablerIconsModule } from 'angular-tabler-icons';
import { MaterialModule } from 'src/app/material.module';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-nav-item',
imports: [TranslateModule, TablerIconsModule, MaterialModule, CommonModule],
templateUrl: './nav-item.component.html',
styleUrls: [],
animations: [
trigger('indicatorRotate', [
state('collapsed', style({ transform: 'rotate(0deg)' })),
state('expanded', style({ transform: 'rotate(180deg)' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
]),
]
})
export class AppNavItemComponent implements OnChanges {
@Output() toggleMobileLink: any = new EventEmitter<void>();
@Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
expanded: any = false;
disabled: any = false;
twoLines: any = false;
@HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
@Input() item: NavItem | any;
@Input() depth: any;
constructor(public navService: NavService, public router: Router) {
if (this.depth === undefined) {
this.depth = 0;
}
}
ngOnChanges() {
const url = this.navService.currentUrl();
if (this.item.route && url) {
this.expanded = url.indexOf(`/${this.item.route}`) === 0;
this.ariaExpanded = this.expanded;
}
}
onItemSelected(item: NavItem) {
if (!item.children || !item.children.length) {
this.router.navigate([item.route]);
}
if (item.children && item.children.length) {
this.expanded = !this.expanded;
}
//scroll
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
if (!this.expanded) {
if (window.innerWidth < 1024) {
this.notify.emit();
}
}
}
onSubItemSelected(item: NavItem) {
if (!item.children || !item.children.length) {
if (this.expanded && window.innerWidth < 1024) {
this.notify.emit();
}
}
}
isDirectlyActive(item: NavItem): boolean {
return !!item.route && this.router.isActive(item.route, true);
}
isChildActive(item: NavItem): boolean {
if (!item.children) return false;
return item.children.some(
(child) => this.isDirectlyActive(child) || this.isChildActive(child)
);
}
}

705
theme/packages/rtl/src/app/layouts/full/vertical/sidebar/sidebar-data.ts Normal file
View File

@@ -0,0 +1,705 @@
import { NavItem } from './nav-item/nav-item';
export const navItems: NavItem[] = [
{
navCap: 'Home',
},
{
displayName: 'Analytical',
iconName: 'aperture',
route: '/dashboards/dashboard1',
},
{
displayName: 'eCommerce',
iconName: 'shopping-cart',
route: '/dashboards/dashboard2',
},
{
displayName: 'Frontend pages',
iconName: 'app-window',
route: 'front-pages',
children: [
{
displayName: 'Home Page',
iconName: 'point',
route: 'front-pages/homepage',
} ,
{
displayName: 'About Us',
iconName: 'point',
route: 'front-pages/about',
} ,
{
displayName: 'Blog',
iconName: 'point',
route: 'front-pages/blog',
} ,
{
displayName: 'Blog Details',
iconName: 'point',
route: 'front-pages/blog-details',
} ,
{
displayName: 'Portfolio',
iconName: 'point',
route: 'front-pages/portfolio',
},
{
displayName: 'Pricing',
iconName: 'point',
route: 'front-pages/pricing',
},
{
displayName: 'Contact',
iconName: 'point',
route: 'front-pages/contact',
}
]
},
{
navCap: 'Apps',
},
{
displayName: 'Chat',
iconName: 'message-2',
route: 'apps/chat',
},
{
displayName: 'Calendar',
iconName: 'calendar-event',
route: 'apps/calendar',
},
{
displayName: 'Email',
iconName: 'mail',
route: 'apps/email/inbox',
},
{
displayName: 'Kanban',
iconName: 'checklist',
route: 'apps/kanban',
},
{
displayName: 'User Profile',
iconName: 'user-circle',
route: 'apps/profile-details',
chip: true,
chipClass: 'bg-error text-white',
chipContent: 'New',
children: [
{
displayName: 'Profile',
iconName: 'point',
route: 'apps/profile-details/profile',
},
{
displayName: 'Followers',
iconName: 'point',
route: 'apps/profile-details/followers',
},
{
displayName: 'Friends',
iconName: 'point',
route: 'apps/profile-details/friends',
},
{
displayName: 'Gellary',
iconName: 'point',
route: 'apps/profile-details/gallery',
},
],
},
{
displayName: 'Ecommerce',
iconName: 'basket',
route: 'apps/product',
chip: true,
chipClass: 'border-error text-error',
chipContent: 'New',
children: [
{
displayName: 'Product List',
iconName: 'point',
route: 'apps/product/product-list',
},
{
displayName: 'Add Product',
iconName: 'point',
route: 'apps/product/add-product',
},
{
displayName: 'Edit Product',
iconName: 'point',
route: 'apps/product/edit-product',
},
{
displayName: 'Shop',
iconName: 'point',
route: 'apps/product/shop',
},
],
},
{
displayName: 'Contacts',
iconName: 'phone',
route: 'apps/contacts',
},
{
displayName: 'Courses',
iconName: 'certificate',
route: 'apps/courses',
},
{
displayName: 'Employee',
iconName: 'brand-ctemplar',
route: 'apps/employee',
},
{
displayName: 'Notes',
iconName: 'note',
route: 'apps/notes',
},
{
displayName: 'Tickets',
iconName: 'ticket',
route: 'apps/tickets',
},
{
displayName: 'Contact List',
iconName: 'phone',
route: 'apps/contact-list',
},
{
displayName: 'Invoice',
iconName: 'file-invoice',
route: 'apps/invoice',
children: [
{
displayName: 'List',
iconName: 'point',
route: 'apps/invoice/list',
},
{
displayName: 'Detail',
iconName: 'point',
route: 'apps/invoice/viewInvoice/101',
},
{
displayName: 'Create',
iconName: 'point',
route: 'apps/invoice/addInvoice',
},
{
displayName: 'Edit',
iconName: 'point',
route: 'apps/invoice/editinvoice/101',
},
],
},
{
displayName: 'ToDo',
iconName: 'edit',
route: 'apps/todo',
},
{
displayName: 'Blog',
iconName: 'chart-donut-3',
route: 'apps/blog',
children: [
{
displayName: 'Post',
iconName: 'point',
route: 'apps/blog/post',
},
{
displayName: 'Detail',
iconName: 'point',
route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
},
],
},
{
navCap: 'Pages',
},
{
displayName: 'Roll Base Access',
iconName: 'lock-access',
route: 'apps/permission',
},
{
displayName: 'Treeview',
iconName: 'git-merge',
route: 'theme-pages/treeview',
},
{
displayName: 'Pricing',
iconName: 'currency-dollar',
route: 'theme-pages/pricing',
},
{
displayName: 'Account Setting',
iconName: 'user-circle',
route: 'theme-pages/account-setting',
},
{
displayName: 'FAQ',
iconName: 'help',
route: 'theme-pages/faq',
},
{
displayName: 'Landingpage',
iconName: 'app-window',
route: 'landingpage',
},
{
displayName: 'Widgets',
iconName: 'layout',
route: 'widgets',
children: [
{
displayName: 'Cards',
iconName: 'point',
route: 'widgets/cards',
},
{
displayName: 'Banners',
iconName: 'point',
route: 'widgets/banners',
},
{
displayName: 'Charts',
iconName: 'point',
route: 'widgets/charts',
},
],
},
{
navCap: 'Forms',
},
{
displayName: 'Form elements',
iconName: 'apps',
route: 'forms/forms-elements',
children: [
{
displayName: 'Autocomplete',
iconName: 'point',
route: 'forms/forms-elements/autocomplete',
},
{
displayName: 'Button',
iconName: 'point',
route: 'forms/forms-elements/button',
},
{
displayName: 'Checkbox',
iconName: 'point',
route: 'forms/forms-elements/checkbox',
},
{
displayName: 'Radio',
iconName: 'point',
route: 'forms/forms-elements/radio',
},
{
displayName: 'Datepicker',
iconName: 'point',
route: 'forms/forms-elements/datepicker',
},
],
},
{
displayName: 'Form Layouts',
iconName: 'file-description',
route: '/forms/form-layouts',
},
{
displayName: 'Form Horizontal',
iconName: 'box-align-bottom',
route: '/forms/form-horizontal',
},
{
displayName: 'Form Vertical',
iconName: 'box-align-left',
route: '/forms/form-vertical',
},
{
displayName: 'Form Wizard',
iconName: 'files',
route: '/forms/form-wizard',
},
{
displayName: 'Toastr',
iconName: 'notification',
route: '/forms/form-toastr',
},
{
displayName: 'Editor',
iconName: 'edit',
route: '/forms/form-editor',
chip: true,
chipClass: 'bg-error text-white',
chipContent: 'New',
},
{
navCap: 'Tables',
},
{
displayName: 'Tables',
iconName: 'layout',
route: 'tables',
children: [
{
displayName: 'Basic Table',
iconName: 'point',
route: 'tables/basic-table',
},
{
displayName: 'Dynamic Table',
iconName: 'point',
route: 'tables/dynamic-table',
},
{
displayName: 'Expand Table',
iconName: 'point',
route: 'tables/expand-table',
},
{
displayName: 'Filterable Table',
iconName: 'point',
route: 'tables/filterable-table',
},
{
displayName: 'Footer Row Table',
iconName: 'point',
route: 'tables/footer-row-table',
},
{
displayName: 'HTTP Table',
iconName: 'point',
route: 'tables/http-table',
},
{
displayName: 'Mix Table',
iconName: 'point',
route: 'tables/mix-table',
},
{
displayName: 'Multi Header Footer',
iconName: 'point',
route: 'tables/multi-header-footer-table',
},
{
displayName: 'Pagination Table',
iconName: 'point',
route: 'tables/pagination-table',
},
{
displayName: 'Row Context Table',
iconName: 'point',
route: 'tables/row-context-table',
},
{
displayName: 'Selection Table',
iconName: 'point',
route: 'tables/selection-table',
},
{
displayName: 'Sortable Table',
iconName: 'point',
route: 'tables/sortable-table',
},
{
displayName: 'Sticky Column',
iconName: 'point',
route: 'tables/sticky-column-table',
},
{
displayName: 'Sticky Header Footer',
iconName: 'point',
route: 'tables/sticky-header-footer-table',
},
],
},
{
displayName: 'Data table',
iconName: 'border-outer',
route: '/datatable/kichen-sink',
},
{
navCap: 'Chart',
},
{
displayName: 'Line',
iconName: 'chart-line',
route: '/charts/line',
},
{
displayName: 'Gredient',
iconName: 'chart-arcs',
route: '/charts/gredient',
},
{
displayName: 'Area',
iconName: 'chart-area',
route: '/charts/area',
},
{
displayName: 'Candlestick',
iconName: 'chart-candle',
route: '/charts/candlestick',
},
{
displayName: 'Column',
iconName: 'chart-dots',
route: '/charts/column',
},
{
displayName: 'Doughnut & Pie',
iconName: 'chart-donut-3',
route: '/charts/doughnut-pie',
},
{
displayName: 'Radialbar & Radar',
iconName: 'chart-radar',
route: '/charts/radial-radar',
},
{
navCap: 'UI',
},
{
displayName: 'Ui Components',
iconName: 'box',
route: 'ui-components',
children: [
{
displayName: 'Badge',
iconName: 'point',
route: 'ui-components/badge',
},
{
displayName: 'Expansion Panel',
iconName: 'point',
route: 'ui-components/expansion',
},
{
displayName: 'Chips',
iconName: 'point',
route: 'ui-components/chips',
},
{
displayName: 'Dialog',
iconName: 'point',
route: 'ui-components/dialog',
},
{
displayName: 'Lists',
iconName: 'point',
route: 'ui-components/lists',
},
{
displayName: 'Divider',
iconName: 'point',
route: 'ui-components/divider',
},
{
displayName: 'Menu',
iconName: 'point',
route: 'ui-components/menu',
},
{
displayName: 'Paginator',
iconName: 'point',
route: 'ui-components/paginator',
},
{
displayName: 'Progress Bar',
iconName: 'point',
route: 'ui-components/progress',
},
{
displayName: 'Progress Spinner',
iconName: 'point',
route: 'ui-components/progress-spinner',
},
{
displayName: 'Ripples',
iconName: 'point',
route: 'ui-components/ripples',
},
{
displayName: 'Slide Toggle',
iconName: 'point',
route: 'ui-components/slide-toggle',
},
{
displayName: 'Slider',
iconName: 'point',
route: 'ui-components/slider',
},
{
displayName: 'Snackbar',
iconName: 'point',
route: 'ui-components/snackbar',
},
{
displayName: 'Tabs',
iconName: 'point',
route: 'ui-components/tabs',
},
{
displayName: 'Toolbar',
iconName: 'point',
route: 'ui-components/toolbar',
},
{
displayName: 'Tooltips',
iconName: 'point',
route: 'ui-components/tooltips',
},
],
},
{
navCap: 'Auth',
},
{
displayName: 'Login',
iconName: 'login',
route: '/authentication',
children: [
{
displayName: 'Login 1',
iconName: 'point',
route: '/authentication/login',
},
{
displayName: 'Boxed Login',
iconName: 'point',
route: '/authentication/boxed-login',
},
],
},
{
displayName: 'Register',
iconName: 'user-plus',
route: '/authentication',
children: [
{
displayName: 'Side Register',
iconName: 'point',
route: '/authentication/side-register',
},
{
displayName: 'Boxed Register',
iconName: 'point',
route: '/authentication/boxed-register',
},
],
},
{
displayName: 'Forgot Password',
iconName: 'rotate',
route: '/authentication',
children: [
{
displayName: 'Side Forgot Password',
iconName: 'point',
route: '/authentication/side-forgot-pwd',
},
{
displayName: 'Boxed Forgot Password',
iconName: 'point',
route: '/authentication/boxed-forgot-pwd',
},
],
},
{
displayName: 'Two Steps',
iconName: 'zoom-code',
route: '/authentication',
children: [
{
displayName: 'Side Two Steps',
iconName: 'point',
route: '/authentication/side-two-steps',
},
{
displayName: 'Boxed Two Steps',
iconName: 'point',
route: '/authentication/boxed-two-steps',
},
],
},
{
displayName: 'Error',
iconName: 'alert-circle',
route: '/authentication/error',
},
{
displayName: 'Maintenance',
iconName: 'settings',
route: '/authentication/maintenance',
},
{
navCap: 'Other',
},
{
displayName: 'Menu Level',
iconName: 'box-multiple',
route: '/menu-level',
children: [
{
displayName: 'Menu 1',
iconName: 'point',
route: '/menu-1',
children: [
{
displayName: 'Menu 1',
iconName: 'point',
route: '/menu-1',
},
{
displayName: 'Menu 2',
iconName: 'point',
route: '/menu-2',
},
],
},
{
displayName: 'Menu 2',
iconName: 'point',
route: '/menu-2',
},
],
},
{
displayName: 'Disabled',
iconName: 'ban',
route: '/disabled',
disabled: true,
},
{
displayName: 'Chip',
iconName: 'mood-smile',
route: '/',
chip: true,
chipClass: 'bg-primary text-white',
chipContent: '9',
},
{
displayName: 'Outlined',
iconName: 'mood-smile',
route: '/',
chip: true,
chipClass: 'bg-error text-white',
chipContent: 'outlined',
},
{
displayName: 'External Link',
iconName: 'star',
route: 'https://www.google.com/',
external: true,
},
];

89
theme/packages/rtl/src/app/material.module.ts Normal file
View File

@@ -0,0 +1,89 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Material Form Controls
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// Material Navigation
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
// Material Layout
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
// Material Buttons & Indicators
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
// Material Popups & Modals
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
// Material Data tables
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
@NgModule({
declarations: [],
imports: [
],
exports: [
MatAutocompleteModule,
MatCheckboxModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatCardModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatListModule,
MatStepperModule,
MatTabsModule,
MatTreeModule,
MatButtonModule,
MatButtonToggleModule,
MatBadgeModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatRippleModule,
MatBottomSheetModule,
MatDialogModule,
MatSnackBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
})
export class MaterialModule {}

123
theme/packages/rtl/src/app/pages/apps/chat/chat.component.html Normal file
View File

@@ -0,0 +1,123 @@
<mat-card class="chat-app cardWithShadow">
<mat-sidenav-container [ngClass]="{
'side-panel-opened': sidePanelOpened,
'side-panel-closed': !sidePanelOpened
}">
<!-- ---------------------------------------------------- -->
<!-- sidebar -->
<!-- ---------------------------------------------------- -->
<mat-sidenav [mode]="isOver() ? 'over' : 'side'" [opened]="sidePanelOpened" (open)="sidePanelOpened = true"
(close)="sidePanelOpened = false">
<ng-scrollbar class="position-relative" style="height: 100%">
<div class="d-flex align-items-center p-24 gap-16">
<img src="assets/images/profile/user-1.jpg" class="rounded-circle" width="54" />
<div>
<h4 class="f-s-16 f-w-600">Mathew Anderson</h4>
<span class="f-s-12">info&#64;modernize.com</span>
</div>
</div>
<div class="p-x-24">
<!-- search -->
<mat-form-field appearance="outline" class="w-100">
<input matInput placeholder="Search Contacts" [(ngModel)]="searchTerm" (input)="searchMessages()" />
<mat-icon matSuffix>
<i-tabler name="search" class="icon-20 d-flex align-items-end m-t-2"></i-tabler>
</mat-icon>
</mat-form-field>
</div>
@if (filteredMessages() && filteredMessages().length > 0) {
<div class="m-x-24">
<mat-nav-list class="chat-listing">
@for(message of filteredMessages(); track message.from) {
<mat-list-item role="listitem" (click)="selectMessage(message)"
[class.bg-light-primary]="message === selectedMessage()" class="m-b-2 gap-12">
<span matListItemIcon>
<img src="{{ message.photo }}" alt="" width="42" class="rounded-circle" />
</span>
<h3 class="f-w-600 f-s-16" matListItemTitle>
{{ message.from }}
</h3>
<p class="f-s-14 m-t-4" matListItemLine>
{{ message.subject }}
</p>
</mat-list-item>
}
</mat-nav-list>
</div>
} @else {
<div class="p-15 bg-light-primary text-primary rounded m-x-20 m-t-20 text-center">
<span class="f-s-14">No messages found.</span>
</div>
}
</ng-scrollbar>
</mat-sidenav>
<mat-sidenav-content>
<!-- ------------------------------------------- -->
<!-- chat details -->
<!-- ------------------------------------------- -->
<mat-toolbar class="chat-right-panel d-flex align-items-center b-b-1 gap-8">
<button (click)="sidePanelOpened = !sidePanelOpened" mat-icon-button>
<mat-icon>short_text</mat-icon>
</button>
<div class="d-flex align-items-center gap-16">
<img src="{{ selectedMessage()?.photo }}" width="40" class="rounded-circle" />
<div class="f-s-16 f-w-600">
{{ selectedMessage()?.from }}
</div>
</div>
<button [matMenuTriggerFor]="moredd" class="m-l-auto" mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #moredd="matMenu" x-position="before">
<button mat-menu-item>Contact info</button>
<button mat-menu-item>Mute</button>
<button mat-menu-item>Delete chat</button>
</mat-menu>
</mat-toolbar>
<!-- ------------------------------------------- -->
<!-- chat content -->
<!-- ------------------------------------------- -->
<ng-scrollbar style="height: calc(100vh - 442px)" class="position-relative">
<mat-card-content class="chat-middle-box p-24">
@for(c of selectedMessage()?.chat; track c) { @if(c.type === 'odd') {
<div class="chat-list odd">
<div class="m-b-15">
<div class="bg-light-primary p-10 rounded d-flex align-items-center gap-16">
<img src="{{ selectedMessage()?.photo }}" class="rounded-circle" width="40" />
<span class="f-s-14">{{ c.msg }}</span>
</div>
<span class="f-s-12">
{{ c.date | date }}
</span>
</div>
</div>
} @else {
<div class="chat-list even">
<div class="m-b-15">
<div class="bg-light-secondary p-10 rounded d-flex align-items-center f-s-14">
{{ c.msg }}
</div>
<span class="f-s-12">
{{ c.date | date }}
</span>
</div>
</div>
} }
</mat-card-content>
</ng-scrollbar>
<mat-divider></mat-divider>
<div class="p-t-20 p-x-24">
<mat-form-field appearance="outline" class="w-100">
<input matInput placeholder="Send message" [ngModel]="msg()" (ngModelChange)="msg.set($event)"
(keydown.enter)="sendMessage()" />
<button mat-icon-button matSuffix (click)="sendMessage()" [disabled]="!msg">
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-card>

286
theme/packages/rtl/src/app/pages/apps/fullcalendar/fullcalendar.component.ts Normal file
View File

@@ -0,0 +1,286 @@
import {
Component,
ChangeDetectionStrategy,
Inject,
signal,
DOCUMENT
} from '@angular/core';
import { CommonModule, NgSwitch } from '@angular/common';
import {
MatDialog,
MatDialogRef,
MatDialogConfig,
MAT_DIALOG_DATA,
MatDialogModule,
} from '@angular/material/dialog';
import {
FormsModule,
ReactiveFormsModule,
UntypedFormGroup,
} from '@angular/forms';
import { CalendarFormDialogComponent } from './calendar-form-dialog/calendar-form-dialog.component';
import {
startOfDay,
subDays,
addDays,
endOfMonth,
isSameDay,
isSameMonth,
addHours,
subMonths,
addMonths,
} from 'date-fns';
import { Subject } from 'rxjs';
import {
CalendarDateFormatter,
CalendarEvent,
CalendarEventAction,
CalendarEventTimesChangedEvent,
CalendarModule,
CalendarView,
} from 'angular-calendar';
import { MaterialModule } from 'src/app/material.module';
import {
MatNativeDateModule,
provideNativeDateAdapter,
} from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { TablerIconsModule } from 'angular-tabler-icons';
const colors: any = {
red: {
primary: '#fa896b',
secondary: '#fdede8',
},
blue: {
primary: '#5d87ff',
secondary: '#ecf2ff',
},
yellow: {
primary: '#ffae1f',
secondary: '#fef5e5',
},
};
@Component({
selector: 'app-calendar-dialog',
templateUrl: './dialog.component.html',
imports: [
MaterialModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
MatNativeDateModule,
MatDialogModule,
MatDatepickerModule, TablerIconsModule
],
providers: [provideNativeDateAdapter()],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CalendarDialogComponent {
options!: UntypedFormGroup;
constructor(
public dialogRef: MatDialogRef<CalendarDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
}
@Component({
selector: 'app-fullcalendar',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './fullcalendar.component.html',
imports: [
MaterialModule,
FormsModule,
ReactiveFormsModule,
NgSwitch,
CalendarModule,
CommonModule,
MatDatepickerModule,
MatDialogModule,
MatFormFieldModule,
],
providers: [provideNativeDateAdapter(), CalendarDateFormatter]
})
export class AppFullcalendarComponent {
dialogRef = signal<MatDialogRef<CalendarDialogComponent> | any>(null);
dialogRef2 = signal<MatDialogRef<CalendarFormDialogComponent> | any>(null);
lastCloseResult = signal<string>('');
actionsAlignment = signal<string>('');
view = signal<any>('month');
viewDate = signal<Date>(new Date());
activeDayIsOpen = signal<boolean>(true);
config: MatDialogConfig = {
disableClose: false,
width: '',
height: '',
position: {
top: '',
bottom: '',
left: '',
right: '',
},
data: {
action: '',
event: [],
},
};
numTemplateOpens = 0;
actions: CalendarEventAction[] = [
{
label: '<span class="text-white link m-l-5">: Edit</span>',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.handleEvent('Edit', event);
},
},
{
label: '<span class="text-danger m-l-5">Delete</span>',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.events.set(
this.events().filter((iEvent: CalendarEvent<any>) => iEvent !== event)
);
this.handleEvent('Deleted', event);
},
},
];
refresh: Subject<any> = new Subject();
events = signal<CalendarEvent[] | any>([
{
start: subDays(startOfDay(new Date()), 1),
end: addDays(new Date(), 1),
title: 'A 3 day event',
color: colors.red,
actions: this.actions,
},
{
start: startOfDay(new Date()),
title: 'An event with no end date',
color: colors.blue,
actions: this.actions,
},
{
start: subDays(endOfMonth(new Date()), 3),
end: addDays(endOfMonth(new Date()), 3),
title: 'A long event that spans 2 months',
color: colors.blue,
},
{
start: addHours(startOfDay(new Date()), 2),
end: new Date(),
title: 'A draggable and resizable event',
color: colors.yellow,
actions: this.actions,
resizable: {
beforeStart: true,
afterEnd: true,
},
draggable: true,
},
]);
constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) {}
dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
if (isSameMonth(date, this.viewDate())) {
if (
(isSameDay(this.viewDate(), date) && this.activeDayIsOpen() === true) ||
events.length === 0
) {
this.activeDayIsOpen.set(false);
} else {
this.activeDayIsOpen.set(true);
this.viewDate.set(date);
}
}
}
eventTimesChanged({
event,
newStart,
newEnd,
}: CalendarEventTimesChangedEvent): void {
this.events.set(
this.events().map((iEvent: CalendarEvent<any>) => {
if (iEvent === event) {
return {
...event,
start: newStart,
end: newEnd,
};
}
return iEvent;
})
);
this.handleEvent('Dropped or resized', event);
}
handleEvent(action: string, event: CalendarEvent): void {
this.config.data = { event, action };
this.dialogRef.set(this.dialog.open(CalendarDialogComponent, this.config));
this.dialogRef()
.afterClosed()
.subscribe((result: string) => {
this.lastCloseResult.set(result);
this.dialogRef.set(null);
this.refresh.next(result);
});
}
addEvent(): void {
this.dialogRef2.set(
this.dialog.open(CalendarFormDialogComponent, {
panelClass: 'calendar-form-dialog',
autoFocus: false,
data: {
action: 'add',
date: new Date(),
},
})
);
this.dialogRef2()
.afterClosed()
.subscribe((res: { action: any; event: any }) => {
if (!res) {
return;
}
const dialogAction = res.action;
const responseEvent = res.event;
responseEvent.actions = this.actions;
this.events.set([...this.events(), responseEvent]);
this.dialogRef2.set(null);
this.refresh.next(res);
});
}
deleteEvent(eventToDelete: CalendarEvent): void {
this.events.set(
this.events().filter(
(event: CalendarEvent<any>) => event !== eventToDelete
)
);
}
setView(view: CalendarView | any): void {
this.view.set(view);
}
goToPreviousMonth(): void {
this.viewDate.set(subMonths(this.viewDate(), 1));
}
goToNextMonth(): void {
this.viewDate.set(addMonths(this.viewDate(), 1));
}
goToToday() {
this.viewDate.set(new Date());
}
}

156
theme/packages/rtl/src/app/pages/apps/invoice/add-invoice/add-invoice.component.html Normal file
View File

@@ -0,0 +1,156 @@
<mat-card class="cardWithShadow">
<mat-card-content>
<form #invoiceForm="ngForm">
<div class="row justify-content-between m-b-24">
<div class="col-sm-4 d-flex align-items-center">
<h4 class="f-s-18 f-w-600">
#
<span name="id" [(ngModel)]="invoice().id" ngDefaultControl>
{{ invoice().id }}</span>
</h4>
</div>
<div class="col-sm-4 text-right">
<a routerLink="/apps/invoice/list" mat-flat-button class="bg-error text-white m-r-10">
Cancel
</a>
<button mat-flat-button color="primary" (click)="saveDetail($event)" [disabled]="addForm.invalid">
Save Invoice
</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="row p-y-24 justify-content-between">
<div class="col-sm-4">
<span class="f-w-600 f-s-15 d-block m-b-8">
Order Status:
</span>
<h6 name="date" class="m-t-5 m-b-0 f-w-500 f-s-14" ngDefaultControl>
{{ invoice().status }}
</h6>
</div>
<div class="col-sm-6 d-flex align-items-center justify-content-end">
<div class="text-right">
<span class="f-w-600 f-s-15 d-block m-b-8">
Order Date
</span>
<h6 name="date" class="m-t-5 m-b-0 f-w-500 f-s-14" [(ngModel)]="invoice().orderDate"
ngDefaultControl>
{{ invoice().orderDate | date : "dd-MM-yyyy" }}
</h6>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="row m-y-24 p-t-24">
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill From</mat-label>
<input matInput placeholder="Bill From" name="from" [(ngModel)]="invoice().billFrom" />
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill To</mat-label>
<input matInput placeholder="Bill To" name="to" [(ngModel)]="invoice().billTo" />
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Enter From Address</mat-label>
<input matInput placeholder="Enter From Address" name="fromAddress"
[(ngModel)]="invoice().billFromAddress" />
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill From</mat-label>
<input matInput placeholder="Enter To Address" name="toAddress" [(ngModel)]="invoice().billToAddress" />
</mat-form-field>
</div>
</div>
</form>
<div [formGroup]="addForm" class="add-invoice-list">
<div class="table-responsive">
<table class="table table-hover b-1 no-wrap w-100 rounded text-left">
<thead>
<tr>
<th class="p-16">#</th>
<th class="p-16">Item Name</th>
<th class="p-16">Unit Price</th>
<th class="p-16">Units</th>
<th class="p-16">Unit Total Price</th>
<th class="p-16"></th>
</tr>
</thead>
<tbody>
@for(row of addForm.get('rows')['controls']; track row; let index =
$index) {
<tr>
<td class="p-16">
{{ index + 1 }}
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input type="text" matInput class="form-control" [formControl]="row.get('itemName')"
(input)="itemsChanged()" />
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input type="number" matInput class="form-control" min="1" [formControl]="row.get('unitPrice')"
(input)="itemsChanged()" />
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input type="number" matInput class="form-control" min="1" [formControl]="row.get('units')"
(input)="itemsChanged()" />
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input [disabled]="true" matInput matInput class="form-control" [formControl]="row.get('itemTotal')"
[value]="
row.get('unitPrice').value * row.get('units').value
" />
</mat-form-field>
</td>
<td>
@if(addForm.get('rows')) {
<button (click)="onAddRow()" [disabled]="addForm.invalid" class="d-flex justify-content-center icon-38 p-8" mat-icon-button>
<i-tabler name="circle-plus" class="icon-18 d-flex"></i-tabler>
</button>
}
</td>
<td>
@if(index > 0) {
<button mat-icon-button (click)="onRemoveRow(index)" class="d-flex justify-content-center icon-38 p-8">
<i-tabler name="trash" class="icon-18 d-flex"></i-tabler>
</button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="text-right m-t-30">
<h5 class="m-b-5 f-w-600 f-s-16">Sub total: {{ subTotal() }}</h5>
<h5 class="f-w-600 f-s-16 m-b-24">Total Vat: {{ vat() }}%</h5>
<mat-divider></mat-divider>
<h3 class="m-b-0 p-t-20 f-s-18">Grand Total: {{ grandTotal() }}</h3>
</div>
</div>
</mat-card-content>
</mat-card>

239
theme/packages/rtl/src/app/pages/apps/invoice/edit-invoice/edit-invoice.component.html Normal file
View File

@@ -0,0 +1,239 @@
<mat-card class="cardWithShadow">
<mat-card-content>
@if( invoice()) {
<span>
<form #invoiceForm="ngForm">
<div class="row m-b-24">
<div class="col-sm-4 d-flex align-items-center">
<h4 class="f-s-14 f-s-18 f-w-600">
#
<span name="id" [(ngModel)]="invoice().id" ngDefaultControl>
{{ invoice().id }}</span
>
</h4>
</div>
<div class="col-sm-8 text-right">
<a
routerLink="/apps/invoice/list"
mat-flat-button
class="bg-error text-white m-r-10"
>
Cancel
</a>
<button
mat-flat-button
color="primary"
(click)="saveDetail($event)"
>
Save Invoice
</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="row p-y-24 justify-content-between">
<div class="col-sm-4">
<span class="f-w-600 f-s-15 d-block m-b-8"> Order Status: </span>
<mat-form-field appearance="outline" class="w-100 theme-select">
<mat-select name="satus" [(ngModel)]="invoice().status">
<mat-option value="Pending"> Pending </mat-option>
<mat-option value="Shipped"> Shipped </mat-option>
<mat-option value="Delivered"> Delivered </mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-sm-6 d-flex align-items-center justify-content-end">
<div class="text-right">
<span class="f-w-600 f-s-15 d-block m-b-8"> Order Date </span>
<h6
name="date"
class="m-t-5 m-b-0 f-w-500 f-s-14 f-s-16"
[(ngModel)]="invoice().orderDate"
ngDefaultControl
>
{{ invoice().orderDate | date : "dd-MM-yyyy" }}
</h6>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="row m-y-24 p-t-24">
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill From</mat-label>
<input
matInput
placeholder="Bill From"
name="from"
[(ngModel)]="invoice().billFrom"
/>
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill To</mat-label>
<input
matInput
placeholder="Bill To"
name="to"
[(ngModel)]="invoice().billTo"
/>
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Enter From Address</mat-label>
<input
matInput
placeholder="Enter From Address"
name="fromAddress"
[(ngModel)]="invoice().billFromAddress"
/>
</mat-form-field>
</div>
<div class="col-sm-6">
<mat-form-field appearance="outline" class="w-100">
<mat-label>Bill From</mat-label>
<input
matInput
placeholder="Enter To Address"
name="toAddress"
[(ngModel)]="invoice().billToAddress"
/>
</mat-form-field>
</div>
</div>
</form>
</span>
}
<form [formGroup]="addForm" class="edit-invoice-list">
<div class="table-responsive">
<table
id="tblAdd"
class="table table-hover b-1 no-wrap w-100 rounded text-left"
>
<thead>
<tr>
<th class="p-16">#</th>
<th class="p-16">Item Name</th>
<th class="p-16">Unit Price</th>
<th class="p-16">Units</th>
<th class="p-16">Unit Total Price</th>
<th class="p-16"></th>
</tr>
</thead>
@for(a of addForm.get('item')['controls']; track a; let i =$index) {
<tbody formArrayName="item">
<tr [formGroupName]="i">
<td class="p-16">
{{ i + 1 }}
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input
matInput
type="text"
[id]="'txtNameControl' + i"
class="form-control"
placeholder="Enter Item Name"
formControlName="itemName"
(input)="itemsChanged()"
/>
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input
matInput
type="number"
[id]="'txtCostControl' + i"
class="form-control"
placeholder="Enter Item Price"
formControlName="itemCost"
(input)="itemsChanged()"
/>
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input
matInput
type="number"
[id]="'txtTotalControl' + i"
class="form-control"
placeholder="Enter Item"
formControlName="itemSold"
(input)="itemsChanged()"
/>
</mat-form-field>
</td>
<td class="p-16">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input
matInput
type="number"
formControlName="itemTotal"
[id]="'txtitemTotalControl' + i"
[value]="
(addForm.get('item')?.value[i]?.itemCost || 0) *
(addForm.get('item')?.value[i]?.itemSold || 0)
"
class="form-control"
[disabled]="true"
/>
</mat-form-field>
</td>
<td>
<button
mat-icon-button
color="primary"
(click)="btnAddItemClick()"
class="d-flex justify-content-center icon-38 p-8"
[disabled]="addForm.get('item')?.invalid"
>
<i-tabler
name="circle-plus"
class="icon-18 d-flex"
></i-tabler>
</button>
</td>
<td>
@if(addForm.get('item')?.length > 1) {
<button
mat-icon-button
(click)="btnRemoveClick(i)"
class="d-flex justify-content-center icon-38 p-8"
>
<i-tabler name="trash" class="icon-18 d-flex"></i-tabler>
</button>
}
</td>
</tr>
</tbody>
}
</table>
</div>
<div class="text-right m-t-30">
<div class="text-right m-t-30">
@if(addForm.get('rows')) {
<button color="accent" mat-flat-button [disabled]="addForm.invalid">
Add row
</button>
}
<h5 class="m-b-5 f-w-600 f-s-16">Sub total: {{ subTotal() }}</h5>
<h5 class="f-w-600 f-s-16 m-b-24">Total Vat: {{ vat() }}%</h5>
<mat-divider></mat-divider>
<h3 class="m-b-0 p-t-20 f-s-18">Grand Total: {{ grandTotal() }}</h3>
</div>
</div>
</form>
</mat-card-content>
</mat-card>

164
theme/packages/rtl/src/app/pages/apps/invoice/edit-invoice/edit-invoice.component.ts Normal file
View File

@@ -0,0 +1,164 @@
import { Component, signal } from '@angular/core';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { InvoiceService } from 'src/app/services/apps/invoice/invoice.service';
import { InvoiceList, order } from '../invoice';
import {
UntypedFormGroup,
UntypedFormArray,
UntypedFormBuilder,
Validators,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { OkDialogComponent } from './ok-dialog/ok-dialog.component';
import { MaterialModule } from 'src/app/material.module';
import { CommonModule } from '@angular/common';
import { TablerIconsModule } from 'angular-tabler-icons';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-edit-invoice',
templateUrl: './edit-invoice.component.html',
imports: [
MaterialModule,
CommonModule,
RouterLink,
FormsModule,
ReactiveFormsModule,
TablerIconsModule,
],
})
export class AppEditInvoiceComponent {
id = signal<any>(null);
subTotal = signal<number>(0);
vat = signal<number>(0);
grandTotal = signal<number>(0);
addForm: UntypedFormGroup | any;
invoice = signal<InvoiceList | any>([]);
constructor(
activatedRouter: ActivatedRoute,
private invoiceService: InvoiceService,
private router: Router,
private fb: UntypedFormBuilder,
public dialog: MatDialog,
private snackBar: MatSnackBar
) {
this.id.set(activatedRouter.snapshot.paramMap.get('id'));
this.loadInvoice(); // Load invoice here
this.subTotal.set(this.invoice()?.totalCost || 0);
this.vat.set(this.invoice()?.vat || 0);
this.grandTotal.set(this.invoice()?.grandTotal || 0);
this.addForm = this.fb.group({
item: this.fb.array([this.itemControl()]),
});
this.fillAddControls();
}
loadInvoice(): void {
const invoiceData = this.invoiceService
.getInvoiceList()
.find((x) => x.id === +this.id());
this.invoice.set(invoiceData); // Set the invoice signal
}
itemControl(): UntypedFormGroup {
return this.fb.group({
itemName: ['', Validators.required],
itemCost: ['', Validators.required],
itemSold: ['', Validators.required],
itemTotal: [{ value: 0, disabled: true }],
});
}
fillAddControls(): void {
this.addForm.setControl('item', this.setItem(this.invoice()?.orders));
}
setItem(order: any): UntypedFormArray {
const fa = new UntypedFormArray([]);
order?.forEach((s: any) => {
fa.push(
this.fb.group({
itemName: s.itemName,
itemCost: s.unitPrice,
itemSold: s.units,
itemTotal: s.unitTotalPrice,
})
);
});
return fa;
}
btnAddItemClick(): void {
(<UntypedFormArray>this.addForm.get('item')).push(this.itemControl());
}
btnRemoveClick(i: number): void {
const totalCostOfItem =
this.addForm.get('item')?.value[i].itemCost *
this.addForm.get('item')?.value[i].itemSold;
this.subTotal.set(this.subTotal() - totalCostOfItem);
this.vat.set(this.subTotal() / 10);
this.grandTotal.set(this.subTotal() + this.vat());
(<UntypedFormArray>this.addForm.get('item')).removeAt(i);
}
itemsChanged(): void {
let total = 0;
for (
let t = 0;
t < (<UntypedFormArray>this.addForm.get('item')).length;
t++
) {
if (
this.addForm.get('item')?.value[t].itemCost != '' &&
this.addForm.get('item')?.value[t].itemSold
) {
total +=
this.addForm.get('item')?.value[t].itemCost *
this.addForm.get('item')?.value[t].itemSold;
}
}
this.subTotal.set(total);
this.vat.set(this.subTotal() / 10);
this.grandTotal.set(this.subTotal() + this.vat());
}
saveDetail(event: Event): void {
event.preventDefault();
const currentInvoice = this.invoice();
if (currentInvoice) {
currentInvoice.grandTotal = this.grandTotal();
currentInvoice.totalCost = this.subTotal();
currentInvoice.vat = this.vat();
currentInvoice.orders = [];
for (
let t = 0;
t < (<UntypedFormArray>this.addForm.get('item')).length;
t++
) {
const o: order = new order();
o.itemName = this.addForm.get('item')?.value[t].itemName;
o.unitPrice = this.addForm.get('item')?.value[t].itemCost;
o.units = this.addForm.get('item')?.value[t].itemSold;
o.unitTotalPrice = o.units * o.unitPrice;
currentInvoice.orders.push(o);
}
this.dialog.open(OkDialogComponent);
this.invoiceService.updateInvoice(currentInvoice.id, currentInvoice);
this.router.navigate(['/apps/invoice/list']);
this.showSnackbar('Invoice updated successfully!');
}
}
showSnackbar(message: string): void {
this.snackBar.open(message, 'Close', {
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'top',
});
}
}

281
theme/packages/rtl/src/app/pages/apps/invoice/invoice-list/invoice-list.component.html Normal file
View File

@@ -0,0 +1,281 @@
<div class="row">
<div class="col-sm-6 col-lg-3">
<mat-card
class="cardWithShadow cursor-pointer bg-light-primary shadow-none"
[ngClass]="{ 'active-tab': activeTab() === 'All' }"
(click)="handleTabClick('All')"
>
<mat-card-content class="d-flex align-items-center gap-16">
<div
class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-primary text-white"
>
<i-tabler name="list-details" class="icon-24 d-flex"></i-tabler>
</div>
<div class="info">
<h5 class="f-w-400 lh-sm f-s-14">Total</h5>
<h5 class="f-w-500 lh-sm f-s-14">
{{ allInvoices().length }} invoices
</h5>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 col-lg-3">
<mat-card
class="cardWithShadow cursor-pointer bg-light-secondary shadow-none"
[ngClass]="{ 'active-tab': activeTab() === 'Shipped' }"
(click)="handleTabClick('Shipped')"
>
<mat-card-content class="d-flex align-items-center gap-16">
<div
class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-secondary text-white"
>
<i-tabler name="shopping-bag" class="icon-24 d-flex"></i-tabler>
</div>
<div class="info">
<h5 class="f-w-400 lh-sm f-s-14">Shipped</h5>
<h5 class="f-w-500 lh-sm f-s-14">
{{ countInvoicesByStatus("Shipped") }} invoices
</h5>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 col-lg-3">
<mat-card
class="cardWithShadow cursor-pointer bg-light-success shadow-none"
[ngClass]="{ 'active-tab': activeTab() === 'Delivered' }"
(click)="handleTabClick('Delivered')"
>
<mat-card-content class="d-flex align-items-center gap-16">
<div
class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-success text-white"
>
<i-tabler name="truck" class="icon-24 d-flex"></i-tabler>
</div>
<div class="info">
<h5 class="f-w-400 lh-sm f-s-14">Delivered</h5>
<h5 class="f-w-500 lh-sm f-s-14">
{{ countInvoicesByStatus("Delivered") }} invoices
</h5>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 col-lg-3">
<mat-card
class="cardWithShadow cursor-pointer bg-light-warning shadow-none"
[ngClass]="{ 'active-tab': activeTab() === 'Pending' }"
(click)="handleTabClick('Pending')"
>
<mat-card-content class="d-flex align-items-center gap-16">
<div
class="icon icon-38 rounded d-flex align-items-center justify-content-center bg-warning text-white"
>
<i-tabler name="sort-ascending" class="icon-24 d-flex"></i-tabler>
</div>
<div class="info">
<h5 class="f-w-400 lh-sm f-s-14">Pending</h5>
<h5 class="f-w-500 lh-sm f-s-14">
{{ countInvoicesByStatus("Pending") }} invoices
</h5>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<mat-card class="cardWithShadow">
<mat-card-content>
<div class="row justify-content-between align-items-center">
<div class="col-sm-4">
<mat-form-field appearance="outline" class="w-100 hide-hint">
<input
matInput
placeholder="Search Invoice"
(keyup)="filter($any($event.target).value)"
/>
<mat-icon matSuffix>
<i-tabler name="search" class="icon-20 d-flex m-t-4"></i-tabler>
</mat-icon>
</mat-form-field>
</div>
<div class="col-sm-4 d-flex align-items-center justify-content-end">
<a
mat-button
[routerLink]="['/apps/invoice/addInvoice']"
mat-flat-button
color="primary"
>Add Invoice</a
>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="cardWithShadow">
<mat-card-content>
<div class="table-responsive">
<table
mat-table
[dataSource]="invoiceList"
matSort
class="no-wrap m-t-0 v-middle w-100"
>
<ng-container matColumnDef="chk">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
[checked]="allComplete()"
[indeterminate]="someComplete()"
(change)="setAll($event.checked)"
color="primary"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
<mat-checkbox
[(ngModel)]="element.completed"
(ngModelChange)="updateAllComplete()"
color="primary"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
class="f-w-600 f-s-15"
>
Id
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
{{ element.id }}
</td>
</ng-container>
<ng-container matColumnDef="billFrom">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
class="f-w-600 f-s-15"
>
Bill From
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
{{ element.billFrom }}
</td>
</ng-container>
<ng-container matColumnDef="billTo">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
class="f-w-600 f-s-15"
>
Bill To
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
{{ element.billTo }}
</td>
</ng-container>
<ng-container matColumnDef="totalCost">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
class="f-w-600 f-s-15"
>
Total Cost
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
{{ element.totalCost }}
</td>
</ng-container>
<ng-container matColumnDef="status">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
class="f-w-600 f-s-15"
>
Status
</th>
<td mat-cell *matCellDef="let element" class="f-s-14">
<span
class="p-x-8 p-y-4 f-w-500 rounded-pill f-s-12"
[ngStyle]="{
'background-color':
element.status === 'Shipped'
? 'rgb(93, 135, 255)'
: element.status === 'Delivered'
? 'rgb(19, 222, 185)'
: element.status === 'Pending'
? 'rgb(255, 174, 31)'
: 'transparent',
color: 'white'
}"
>
{{ element.status }}
</span>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-15">
Action
</th>
<td mat-cell *matCellDef="let element" class="d-flex">
<a
mat-icon-button
[routerLink]="['/apps/invoice/editinvoice', element.id]"
class="d-flex align-items-center justify-content-center"
>
<i-tabler
name="pencil"
class="icon-18 d-flex align-items-center"
></i-tabler>
</a>
<a
mat-icon-button
[routerLink]="['/apps/invoice/viewInvoice', element.id]"
class="d-flex align-items-center justify-content-center"
>
<i-tabler
name="eye"
class="icon-18 d-flex align-items-center"
></i-tabler>
</a>
<a
mat-icon-button
(click)="deleteInvoice(element.id)"
class="d-flex align-items-center justify-content-center"
>
<i-tabler
name="trash"
class="icon-18 d-flex align-items-center"
></i-tabler>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator
[pageSizeOptions]="[5, 8, 10]"
showFirstLastButtons
></mat-paginator>
</div>
</mat-card-content>
</mat-card>

125
theme/packages/rtl/src/app/pages/apps/invoice/invoice-view/invoice-view.component.html Normal file
View File

@@ -0,0 +1,125 @@
<mat-card class="cardWithShadow">
<mat-card-content>
@if(invoiceDetail()){
<span>
<div class="row m-b-24">
<div class="col-sm-4 d-flex align-items-center">
<h4 class="f-s-14 f-s-18 f-w-600">#{{ invoiceDetail()?.id }}</h4>
</div>
<div class="col-sm-8 text-right">
<a routerLink="/apps/invoice/list" mat-stroked-button class="m-r-10"
>Back to Invoice</a
>
<a
[routerLink]="['/apps/invoice/editinvoice/', invoiceDetail()?.id]"
mat-flat-button
>Edit Invoice</a
>
</div>
</div>
<mat-divider></mat-divider>
<div class="row p-y-24">
<div class="col-sm-6">
<span class="f-w-600 f-s-15"> Order Status: </span>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.status }}
</h6>
</div>
<div class="col-sm-6 text-right">
<span class="f-w-600 f-s-15"> Order Date: </span>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.orderDate | date : "fullDate" }}
</h6>
</div>
</div>
<mat-divider></mat-divider>
<div class="row p-y-24">
<div class="col-sm-6">
<span class="f-w-600 f-s-15"> Bill From: </span>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billFrom }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billFromEmail }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billFromAddress }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billFromPhone }}
</h6>
</div>
<div class="col-sm-6 text-right">
<span class="f-w-600 f-s-15"> Bill To: </span>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billTo }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billToEmail }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billToAddress }}
</h6>
<h6 class="m-t-5 m-b-0 f-w-500 f-s-14">
{{ invoiceDetail()?.billToPhone }}
</h6>
</div>
</div>
<div class="b-1 table-responsive">
<table
mat-table
[dataSource]="invoiceDetail()?.orders || []"
class="no-wrap v-middle"
>
<ng-container matColumnDef="itemName">
<th mat-header-cell *matHeaderCellDef class="f-s-15 f-w-600">
Item Name
</th>
<td class="font-normal" mat-cell *matCellDef="let element">
{{ element.itemName }}
</td>
</ng-container>
<ng-container matColumnDef="unitPrice">
<th mat-header-cell *matHeaderCellDef class="f-s-15 f-w-600">
Unit Price
</th>
<td class="font-normal" mat-cell *matCellDef="let element">
{{ element.unitPrice }}
</td>
</ng-container>
<ng-container matColumnDef="unit">
<th mat-header-cell *matHeaderCellDef class="f-s-15 f-w-600">
Unit
</th>
<td class="font-normal" mat-cell *matCellDef="let element">
{{ element.units }}
</td>
</ng-container>
<ng-container matColumnDef="total">
<th mat-header-cell *matHeaderCellDef class="f-s-15 f-w-600">
Total Cost
</th>
<td class="font-normal" mat-cell *matCellDef="let element">
{{ element.unitTotalPrice }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<div class="text-right m-t-30">
<h5 class="m-b-5 f-w-600 f-s-16">
Sub total: {{ invoiceDetail()?.totalCost }}
</h5>
<span class="f-w-600 f-s-16">Vat: 10%</span>
<h3 class="m-b-0 b-t-1 p-t-20 f-s-18 m-t-24">
Grand Total: {{ invoiceDetail()?.grandTotal }}
</h3>
</div>
</span>
}
</mat-card-content>
</mat-card>

132
theme/packages/rtl/src/app/pages/apps/tickets/ticket-dialog-content.html Normal file
View File

@@ -0,0 +1,132 @@
@if(action !== 'Delete') {
<mat-dialog-content class="mat-typography">
<div class="d-flex align-items-center justify-content-between m-b-16">
<h3>{{action}} Ticket</h3>
<button
mat-icon-button
mat-dialog-close
class="d-flex justify-content-center"
>
<i-tabler name="x" class="icon-20 d-flex"></i-tabler>
</button>
</div>
<form #userForm="ngForm">
<div class="row">
@if(action === 'Update') {
<div class="col-sm-6 col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Ticket Id</mat-label>
<mat-form-field appearance="outline" class="w-100">
<input
type="text"
matInput
required
id="id"
name="id"
[(ngModel)]="local_data.id"
placeholder="id"
/>
</mat-form-field>
</div>
}
<div class="col-sm-6 col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Ticket Title</mat-label>
<mat-form-field appearance="outline" class="w-100">
<input
type="text"
matInput
required
id="title"
name="title"
[(ngModel)]="local_data.title"
placeholder="Ticker Title"
/>
</mat-form-field>
</div>
<div class="col-sm-6 col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block"
>Ticket Subtext</mat-label
>
<mat-form-field appearance="outline" class="w-100">
<input
type="text"
matInput
required
id="subtext"
name="subtext"
[(ngModel)]="local_data.subtext"
placeholder="Ticket Subtext"
/>
</mat-form-field>
</div>
<div class="col-sm-6 col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Assign User</mat-label>
<mat-form-field appearance="outline" class="w-100">
<mat-select
placeholder="Assign User"
[(ngModel)]="local_data.assignee"
name="assignee"
required
>
@for(user of users; track trackByUser(user)) {
<mat-option [value]="user.name">
<div class="d-flex align-items-center gap-8">
<img
[src]="user.photo"
alt="{{ user.name }}"
style="width: 24px; height: 24px; border-radius: 50%"
/>
{{ user.name }}
</div>
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
@if(action === 'Update'){
<div class="col-sm-6 col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Status</mat-label>
<mat-form-field appearance="outline" class="w-100">
<select
matNativeControl
required
name="status"
[(ngModel)]="local_data.status"
>
<option value="inprogress">In Progress</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>
</mat-form-field>
</div>
} @if(action === 'Update') {
<div class="col-sm-6 col-lg-12">
<mat-form-field>
<mat-label>Date</mat-label>
<input
matInput
[matDatepicker]="picker1"
[formControl]="dateControl"
/>
<mat-datepicker-toggle
matIconSuffix
[for]="picker1"
></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
}
</div>
</form>
</mat-dialog-content>
} @else {
<div class="p-x-24 p-b-24">
Sure to delete <span class="f-w-600">{{local_data.title}}</span>?
</div>
}
<div mat-dialog-actions class="p-24 p-t-0">
<button mat-flat-button (click)="doAction()">{{action}}</button>
<button mat-flat-button class="bg-error text-white" (click)="closeDialog()">
Cancel
</button>
</div>

177
theme/packages/rtl/src/app/pages/apps/tickets/tickets.component.ts Normal file
View File

@@ -0,0 +1,177 @@
import {
Component,
OnInit,
ViewChild,
AfterViewInit,
Inject,
} from '@angular/core';
import { MatTableDataSource, MatTable } from '@angular/material/table';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA,
} from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MaterialModule } from 'src/app/material.module';
import { CommonModule } from '@angular/common';
import { TablerIconsModule } from 'angular-tabler-icons';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TicketService } from 'src/app/services/apps/ticket/ticket.service';
import { TicketElement } from 'src/app/pages/apps/tickets/ticket';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-ticket-list',
templateUrl: './tickets.component.html',
imports: [MaterialModule, CommonModule, TablerIconsModule],
})
export class AppTicketlistComponent implements OnInit, AfterViewInit {
@ViewChild(MatTable, { static: true }) table: MatTable<any>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
searchText: string = '';
totalCount = 0;
Closed = 0;
Inprogress = 0;
Open = 0;
displayedColumns: string[] = [
'id',
'title',
'assignee',
'status',
'date',
'action',
];
dataSource = new MatTableDataSource<TicketElement>([]);
constructor(private ticketService: TicketService, public dialog: MatDialog) {}
ngOnInit(): void {
this.loadTickets(); // Load the initial tickets
}
private loadTickets(): void {
const tickets = this.ticketService.tickets$; // Get tickets from the service
this.dataSource.data = tickets; // Set the dataSource to the tickets
// Update counts based on the current tickets
this.updateCounts();
}
private updateCounts(): void {
this.totalCount = this.dataSource.data.length;
this.Open = this.countTicketsByStatus('open');
this.Closed = this.countTicketsByStatus('closed');
this.Inprogress = this.countTicketsByStatus('inprogress');
}
ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
}
onKeyup(event: KeyboardEvent): void {
const input = event.target as HTMLInputElement;
this.applyFilter(input.value);
}
applyFilter(filterValue: string): void {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
btnCategoryClick(val: string): number {
this.dataSource.filter = val.trim().toLowerCase();
return this.dataSource.filteredData.length;
}
openDialog(action: string, ticket: TicketElement | any): void {
const dialogRef = this.dialog.open(TicketDialogComponent, {
data: { action, ticket },
autoFocus: false,
});
dialogRef.afterClosed().subscribe(() => {
this.loadTickets();
});
}
countTicketsByStatus(status: string): number {
return this.dataSource.data.filter(
(ticket) => ticket.status.toLowerCase() === status.toLowerCase()
).length;
}
}
@Component({
// tslint:disable-next-line - Disables all
selector: 'app-dialog-content',
templateUrl: 'ticket-dialog-content.html',
imports: [
MaterialModule,
CommonModule,
TablerIconsModule,
FormsModule,
ReactiveFormsModule,
TablerIconsModule,
],
})
export class TicketDialogComponent {
action: string;
local_data: TicketElement;
users: any[] = [];
dateControl = new FormControl();
constructor(
public dialogRef: MatDialogRef<TicketDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private ticketService: TicketService,
private snackBar: MatSnackBar
) {
this.action = data.action;
this.local_data = { ...data.ticket };
}
ngOnInit(): void {
this.users = this.ticketService.getUsers(); // Get users from the service
if (this.local_data.date) {
this.dateControl.setValue(
new Date(this.local_data.date).toISOString().split('T')[0]
); // existing date
} else {
// Set to today's date if no existing date is available
this.dateControl.setValue(new Date().toISOString().split('T')[0]);
}
}
doAction(): void {
this.local_data.date = this.dateControl.value; // Update local_data with the new date
if (this.action === 'Update') {
this.ticketService.updateTicket(this.local_data);
this.openSnackBar('Ticket updated successfully!', 'Close');
} else if (this.action === 'Add') {
this.ticketService.addTicket(this.local_data);
this.openSnackBar('Ticket added successfully!', 'Close');
} else if (this.action === 'Delete') {
this.ticketService.deleteTicket(this.local_data.id);
this.openSnackBar('Ticket deleted successfully!', 'Close');
}
this.dialogRef.close();
}
openSnackBar(message: string, action: string): void {
this.snackBar.open(message, action, {
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'top',
});
}
closeDialog(): void {
this.dialogRef.close();
}
trackByUser(user: any): any {
return user.id;
}
}

8
theme/packages/rtl/src/app/pages/forms/form-editor/form-editor.component.html Normal file
View File

@@ -0,0 +1,8 @@
<mat-card class="cardWithShadow">
<mat-card-content>
<div class="NgxEditor__Wrapper" style="min-height: 300px;">
<ngx-editor-menu [editor]="editor" [toolbar]="toolbar" class=""> </ngx-editor-menu>
<ngx-editor [editor]="editor" [ngModel]="html" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>
</mat-card-content>
</mat-card>

34
theme/packages/rtl/src/app/pages/forms/form-editor/form-editor.component.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { NgxEditorComponent, NgxEditorMenuComponent, Editor, Toolbar } from 'ngx-editor';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form-editor',
imports: [MatCardModule, NgxEditorComponent, NgxEditorMenuComponent, FormsModule],
templateUrl: './form-editor.component.html'
})
export class AppFormEditorComponent {
html = '';
editor: Editor;
ngOnInit(): void {
this.editor = new Editor();
}
ngOnDestroy(): void {
this.editor.destroy();
}
toolbar: Toolbar = [
['bold', 'italic'],
['underline'],
['ordered_list', 'bullet_list'],
[{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
['link', 'image'],
['text_color', 'background_color'],
['align_left', 'align_center', 'align_right', 'align_justify'],
];
constructor() { }
}

169
theme/packages/rtl/src/app/pages/front-pages/about-us/about-us.component.html Normal file
View File

@@ -0,0 +1,169 @@
<div class="contact-page">
<div class="banner-section bg-light-primary contact-herder spacing-top-bottom">
<div class="container p-y-20">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="m-b-24 f-s-48 lh-normal section-sub-title">
Get to know Modernize Dashboard Template
</h1>
<div class="hstack">
<a mat-flat-button color="primary">Create an account</a>
<a mat-stroked-button color="primary" class="border-primary">View Open
Positions</a>
</div>
</div>
<div class="col-lg-6">
<p class="lh-base m-t-32">
Do you need a highly customizable and developer friendly premium
Angular admin template packed with numerous features? Modernize
Angular Admin Template has everything you need. This bootstrap based
admin template is designed in accordance with industry standards and
best practices to provide you.
</p>
</div>
</div>
</div>
</div>
<div class="spacing-top-bottom setup-process">
<div class="container">
<h2 class="text-center section-sub-title m-b-48 f-s-40 lh-normal">
The hassle-free setup process
</h2>
<div class="row">
@for(topcard of setupCards; track topcard.title) {
<div class="col-lg-3 col-sm-6 d-flex align-items-stretch">
<mat-card class="shadow-none text-center w-100 bg-light-{{
topcard.color
}} rounded-8 ">
<mat-card-content>
<div class="m-t-16">
@if(topcard.id!==2){
<img [src]="topcard.img" alt="users" width="40" class="rounded-circle" />
}
<h6 class="f-s-16 m-t-16">
{{ topcard.title }}
</h6>
<p class="f-s-14 m-t-16 m-b-0">
{{ topcard.subtitle }}
</p>
@if(topcard.id===2){
<img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-10 m-b--32" />
}
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="spacing-top-bottom key-metric">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-5">
<div class="m-b-32">
<h2 class="f-s-40 m-b-16 section-sub-title f-s-40 lh-normal">Key metric at a glance</h2>
<p class="f-s-14 m-0 lh-base">
From the year we were founded to the impressive customer base
we've built, and the growth percentages that reflect our
continuous improvement, these numbers tell our story at a glance.
Explore the data that drives our mission and underscores our
commitment to excellence.
</p>
</div>
</div>
<div class="col-md-6">
<div class="row stat-section">
@for (stat of stats; track stat) {
<div class="col-6 m-b-32">
<div class="stat-block">
<p class="stat-label f-s-12 f-w-400 text-uppercase text-primary m-y-0">
{{ stat.label }}
</p>
<h2 class="stat-value f-s-48 lh-normal section-sub-title">
{{ stat.value }}
</h2>
<p class="f-s-14 m-y-0">{{ stat.description }}</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="our-leadership spacing-top p-b-48">
<app-image-slider></app-image-slider>
</div>
<div class="features spacing-bottom">
<div class="container">
<div class="row align-items-center justify-content-between">
<!--row-->
<div class="col-md-5 m-b-30">
<div class="client-margin">
<h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
about us?
</h2>
<p class="m-0">
Our users' feedback is a testament to our commitment to quality
and user satisfaction. Read what they have to say about their
journey with us.
</p>
</div>
</div>
<div class="col-md-5">
<mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
<mat-card-content>
<mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
<div class="d-flex align-items-center gap-16 m-b-24">
<div>
<img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
</div>
<h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
</div>
<p class="f-s-14 m-b-16 m-t-0">
Our users' feedback is a testament to our commitment to quality
and user satisfaction. Read what they have to say about their
journey with us.
</p>
<mat-divider></mat-divider>
<div class="d-flex align-items-center gap-10 m-t-8">
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
(click)="goPrev()">
<i-tabler name="chevron-left"
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
</button>
<span class="f-s-14">{{ displayCount() }}</span>
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
(click)="goNext()">
<i-tabler name="chevron-right"
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
</button>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
<div class="footer">
<app-footer></app-footer>
</div>
</div>

23
theme/packages/rtl/src/app/pages/front-pages/about-us/about-us.component.scss Normal file
View File

@@ -0,0 +1,23 @@
.contact-page {
.setup-process {
mat-card-content {
padding: 0px !important;
padding: 30px 16px !important;
}
}
.key-metric {
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
}
.features {
.cardWithShadow {
mat-card-content {
padding: 0px !important;
}
}
}
}

23
theme/packages/rtl/src/app/pages/front-pages/about-us/about-us.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutUsComponent } from './about-us.component';
describe('AboutUsComponent', () => {
let component: AboutUsComponent;
let fixture: ComponentFixture<AboutUsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AboutUsComponent]
})
.compileComponents();
fixture = TestBed.createComponent(AboutUsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

48
theme/packages/rtl/src/app/pages/front-pages/about-us/about-us.component.ts Normal file
View File

@@ -0,0 +1,48 @@
import { Component, computed, signal } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { ImageSliderComponent } from '../image-slider/image-slider.component';
import { FooterComponent } from '../footer/footer.component';
//import { PagePricingComponent } from '../page-pricing/page-pricing.component';
import {
setupCards,
stats,
users,
} from '../front-pagesData';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-about-us',
imports: [IconModule,MaterialModule ,CommonModule,ImageSliderComponent,FooterComponent,
//PagePricingComponent
],
templateUrl: './about-us.component.html',
styleUrl: './about-us.component.scss'
})
export class AboutUsComponent {
setupCards=setupCards;
stats = stats;
currentIndex = signal(0); // Starting from 0
users = users;
// Computed values to auto-update template
currentUser = computed(() => this.users[this.currentIndex()]);
displayCount = computed(
() => `${this.currentIndex() + 1}/${this.users.length}`
);
goPrev() {
if (this.currentIndex() > 0) {
this.currentIndex.update((i) => i - 1);
}
}
goNext() {
if (this.currentIndex() < this.users.length - 1) {
this.currentIndex.update((i) => i + 1);
}
}
}

116
theme/packages/rtl/src/app/pages/front-pages/blog-details/blog-details.component.html Normal file
View File

@@ -0,0 +1,116 @@
<div class="banner-section bg-light-primary spacing-top-bottom">
<div class="container">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
Blog Page
</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
</div>
</div>
<div class="blog-details-content spacing-top-bottom">
<div class="container">
<!-- ----------------------------------------------------------------- -->
<!-- If Blog is available -->
<!-- ----------------------------------------------------------------- -->
@if(blogDetail()) {
<mat-card class="cardWithShadow">
<img mat-card-image src="{{ blogDetail()?.imgSrc }}" alt="Photo of a Shiba Inu" height="440" />
<div class="detail-card-overlay h-100 d-flex align-items-end justify-content-end">
<span class="f-s-12 m-y-16 f-w-600 bg-white rounded-pill p-x-8 m-r-16">2 mins Read</span>
</div>
<mat-card-content class="p-24 b-b-1">
<div class="user-category">
<div>
<img src="{{ blogDetail()?.user }}" class="rounded-circle" width="40" />
</div>
<span class="f-s-12 m-y-16 f-w-600 rounded-pill p-x-8 p-y-4 d-inline-block text-dark bg-light">{{
blogDetail()?.category }}</span>
</div>
<mat-card-title class="f-s-36 lh-normal section-sub-title">{{
blogDetail()?.title }}
</mat-card-title>
<div class="d-flex align-items-center justify-content-center m-t-24 justify-content-between">
<div class="d-flex align-items-center gap-24">
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="eye" class="icon-18"></i-tabler>{{
blogDetail()?.views }}</span>
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="message-2"
class="icon-18"></i-tabler>4</span>
</div>
<span class="f-s-14 d-flex align-items-center">
<i-tabler name="point" class="icon-18"></i-tabler>
{{ blogDetail()?.date }}
</span>
</div>
</mat-card-content>
<mat-card-content class="heading-section">
<h2 class="f-s-28 lh-normal m-y-12 section-sub-title">Main Heading & Points</h2>
<p class="f-s-14">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries,
but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the
</p>
<ul>
<li class="f-s-14">Vivamus eu lacus scelerisque, placerat commodo lectus.</li>
<li class="f-s-14">Etiam et ante at ex porta fringilla.</li>
<li class="f-s-14">Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus</li>
</ul>
<p class="f-s-14">
Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the
</p>
<mat-divider></mat-divider>
<p class="f-s-14">
We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
helping businesses from new startups
</p>
<mat-divider></mat-divider>
<p class="f-s-14">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable making this the
first true generator on the Internet. It uses a dictionary
</p>
<mat-divider class="m-b-16"></mat-divider>
<h2 class="f-s-21 lh-normal">Tags</h2>
<ul>
<li class="f-s-14">Trends</li>
<li class="f-s-14">Design</li>
<li class="f-s-14">Research</li>
</ul>
<mat-divider class="m-b-16"></mat-divider>
<h2 class="f-s-21 lh-normal">Share</h2>
<ul class="text-primary">
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Facebook</a></li>
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Twitter</a></li>
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Linkedin</a></li>
</ul>
<mat-divider class="m-b-16"></mat-divider>
<h2 class="f-s-21 lh-normal">Join our newsletter</h2>
<p class="f-s-14">Email address : <a href="javascript:void(0)" class="f-s-14 text-primary text-decoration-none">Subscribe</a></p>
</mat-card-content>
</mat-card>
}
<!-- ----------------------------------------------------------------- -->
<!-- If Blog isn't available -->
<!-- ----------------------------------------------------------------- -->
@if (!blogDetail() || blogDetail().length === 0) {
<mat-card class="cardWithShadow">
<mat-card-content>
<p>No blog post available.</p>
</mat-card-content>
</mat-card>
}
</div>
</div>
<div class="footer">
<app-footer></app-footer>
</div>

0
theme/packages/rtl/src/app/pages/front-pages/blog-details/blog-details.component.scss Normal file
View File

23
theme/packages/rtl/src/app/pages/front-pages/blog-details/blog-details.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BlogDetailsComponent } from './blog-details.component';
describe('BlogDetailsComponent', () => {
let component: BlogDetailsComponent;
let fixture: ComponentFixture<BlogDetailsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [BlogDetailsComponent]
})
.compileComponents();
fixture = TestBed.createComponent(BlogDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

40
theme/packages/rtl/src/app/pages/front-pages/blog-details/blog-details.component.ts Normal file
View File

@@ -0,0 +1,40 @@
import { CommonModule } from '@angular/common';
import { Component, inject, OnInit, signal } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { FooterComponent } from '../footer/footer.component';
import { FrontEndService } from 'src/app/services/apps/front-pages/front-end.service';
@Component({
selector: 'app-blog-details',
imports: [IconModule, MaterialModule, CommonModule,
FooterComponent
],
templateUrl: './blog-details.component.html',
styleUrl: './blog-details.component.scss'
})
export class BlogDetailsComponent implements OnInit {
blogDetail = signal<any>(null);
private frontendService = inject(FrontEndService);
ngOnInit(): void {
const selected = this.frontendService.getBlog()();
if (selected) {
this.blogDetail.set(selected);
} else {
// Fallback if accessed directly (e.g., from sidebar or refresh)
const defaultBlog = {
id: 1,
time: "2 mins Read",
imgSrc: "/assets/images/blog/blog-img1.jpg",
user: "/assets/images/profile/user-1.jpg",
title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
views: "9,125",
category: "Social",
comments: 3,
date: "Mon, Dec 23"
};
this.blogDetail.set(defaultBlog);
}
}
}

55
theme/packages/rtl/src/app/pages/front-pages/blog/blog.component.html Normal file
View File

@@ -0,0 +1,55 @@
<div class="banner-section bg-light-primary spacing-top-bottom">
<div class="container">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
Blog Page
</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
</div>
</div>
<div class="spacing-top-bottom">
<div class="container">
<div class="row">
@for(cardimg of cardimgs; track cardimg.imgSrc) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow card2 position-relative card-hover cursor-pointer" (click)="getNavigate(cardimg)">
<img mat-card-image src="{{ cardimg.imgSrc }}" alt="Photo of a Shiba Inu" />
<div class="card-overlay h-100 d-flex align-items-end justify-content-end">
<mat-chip class="m-r-16 bg-white">{{
cardimg.time
}}</mat-chip>
</div>
<mat-card-content class="p-y-24">
<div class="user-category">
<div>
<img src="{{ cardimg.user }}" class="rounded-circle" width="40" />
</div>
<mat-chip class="m-y-16 bg-light">{{
cardimg.category
}}</mat-chip>
</div>
<mat-card-title>{{ cardimg.title }}</mat-card-title>
<div class="d-flex align-items-center justify-content-center m-t-24">
<div class="d-flex align-items-center">
<span class="m-r-12 f-s-14 d-flex align-items-center"><i-tabler name="eye"
class="icon-18 m-r-4"></i-tabler>{{ cardimg.views }}</span>
<span class="f-s-14 d-flex align-items-center"><i-tabler name="message-2"
class="icon-18 m-r-4"></i-tabler>{{ cardimg.comments }}</span>
</div>
<span class="m-l-auto f-s-14 d-flex align-items-center">
<i-tabler name="point" class="icon-14 m-r-4 d-flex"></i-tabler>
{{ cardimg.date }}
</span>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
</div>
<div class="footer">
<app-footer></app-footer>
</div>

24
theme/packages/rtl/src/app/pages/front-pages/blog/blog.component.scss Normal file
View File

@@ -0,0 +1,24 @@
.social-btns {
margin-top: 20px;
.btn-icon {
width: 25px !important;
height: 25px !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
tabler-icon {
width: 16px !important;
height: 16px !important;
}
}
.btn-add-story {
font-size: 0.75rem;
padding: 0.35rem 0.75rem;
}
}

23
theme/packages/rtl/src/app/pages/front-pages/blog/blog.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BlogComponent } from './blog.component';
describe('BlogComponent', () => {
let component: BlogComponent;
let fixture: ComponentFixture<BlogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [BlogComponent]
})
.compileComponents();
fixture = TestBed.createComponent(BlogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

32
theme/packages/rtl/src/app/pages/front-pages/blog/blog.component.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component, inject, OnInit } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { cardimgs } from '../front-pagesData';
import { FooterComponent } from '../footer/footer.component';
import { Router } from '@angular/router';
import { FrontEndService } from 'src/app/services/apps/front-pages/front-end.service';
@Component({
selector: 'app-blog',
imports: [IconModule, MaterialModule, FooterComponent,],
templateUrl: './blog.component.html',
styleUrl: './blog.component.scss'
})
export class BlogComponent implements OnInit {
private router = inject(Router);
private frontendService = inject(FrontEndService);
cardimgs = cardimgs;
ngOnInit() {
console.log(cardimgs, 'cardimgs');
}
getNavigate(cardimg: any) {
console.log('cardimg--->', cardimg);
this.frontendService.setBlog(cardimg);
this.router.navigate(['front-pages/blog-details'])
}
}

103
theme/packages/rtl/src/app/pages/front-pages/contact/contact.component.html Normal file
View File

@@ -0,0 +1,103 @@
<div class="contact-content">
<!-- Light Blue Section -->
<div class="banner-section bg-light-primary p-y-80">
<div class="container m-b-80 p-b-80">
<div class="container-content">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0"> Contact us</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">We'd love to hear from you</h1>
</div>
</div>
</div>
<div class="form-content">
<form>
<div class="container">
<!-- Map stays inside, but will visually float out -->
<div class="map-container overflow-hidden rounded">
<iframe class="overflow-hidden rounded"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6335071.017601874!2d7.472741070779207!3d34.000243243063756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x126c2c82aeb63e77%3A0xb5b3d1a2f1304c8e!2sTunisia!5e0!3m2!1sen!2stn!4v1715499362503!5m2!1sen!2stn"
width="100%" height="400" style="border: 0" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="spacing-top-bottom">
<div class="row">
<div class="col-md-8 m-b-30">
<div class="row ">
<div class="col-md-6">
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">First Name<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="text" placeholder="First Name" />
</mat-form-field>
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Phone Number<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="tel" placeholder="xxx xxx xxxx" />
</mat-form-field>
</div>
<div class="col-md-6">
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Last Name<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="text" placeholder="Last Name" />
</mat-form-field>
<!-- input -->
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Email<span>*</span></mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<input matInput type="mail" placeholder="Email address" />
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Enquire related to<span>*</span>
</mat-label>
<mat-form-field appearance="outline" class="w-100">
<mat-select value="General Enquiry">
<mat-option value="General Enquiry">General Enquiry</mat-option>
<mat-option value="General Enquiry 2">General Enquiry 2</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Message</mat-label>
<mat-form-field appearance="outline" class="w-100" color="primary">
<textarea matInput rows="5" placeholder="Write your message here"></textarea>
</mat-form-field>
</div>
</div>
<button mat-flat-button>Submit</button>
</div>
<div class="col-md-4 right-side-content">
<mat-card class="shadow-none bg-primary rounded-8 p-8">
<mat-card-content>
<div>
<h6 class="f-s-20 m-b-16 text-white">Reach Out Today</h6>
<p class="f-s-14 m-0 text-white">
Have questions or need assistance? We're just a message
away.
</p>
</div>
<mat-divider class="m-y-30"></mat-divider>
<div>
<h6 class="f-s-20 m-b-16 text-white">Our Location</h6>
<p class="f-s-14 m-0 text-white">
Visit us in person or find our contact details to connect
with us directly.
</p>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="footer">
<app-footer></app-footer>
</div>
</div>

3
theme/packages/rtl/src/app/pages/front-pages/contact/contact.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.map-container{
margin-top: -200px;
}

23
theme/packages/rtl/src/app/pages/front-pages/contact/contact.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactComponent } from './contact.component';
describe('ContactComponent', () => {
let component: ContactComponent;
let fixture: ComponentFixture<ContactComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ContactComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ContactComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
theme/packages/rtl/src/app/pages/front-pages/contact/contact.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { FooterComponent } from '../footer/footer.component';
@Component({
selector: 'app-contact',
imports: [MaterialModule,IconModule,FooterComponent],
templateUrl: './contact.component.html',
styleUrl: './contact.component.scss'
})
export class ContactComponent {
}

94
theme/packages/rtl/src/app/pages/front-pages/footer/footer.component.html Normal file
View File

@@ -0,0 +1,94 @@
<div class="footer-content">
<div class="custom-container footer-dashboard">
<div class="bg-light-primary rounded-8 footer-container m-b-80 overflow-hidden">
<div class="row">
<div class="col-lg-6">
<div class="spacing-top-bottom spacing-left left-side-content">
<h2 class="f-s-40 m-b-24 lh-normal section-sub-title">
Develop with feature-rich Angular Dashboard
</h2>
<div class="m-b-24 hstack">
<a href="authentication/login" target="_blank" mat-flat-button color="primary" class="">Member Login</a>
<a href="authentication/side-register" target="_blank" mat-stroked-button color="primary"
class="border-primary">Register as Member</a>
</div>
<span class="f-s-14 f-w-600"> One-time purchase</span> - no
recurring fees.
</div>
</div>
<div class="col-md-6 d-none d-lg-block">
<img src="assets/images/front-pages/design-collection.png" alt="bg-img" class="imgStyleDash" />
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3 col-6 m-b-30">
<div class="listContainer">
<h5 class="f-s-16 f-w-600 m-b-30">Applications</h5>
<mat-list role="list" class="p-y-0">
@for (item of applicationsItems; track item) {
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
{{ item.title }}
</a>
}
</mat-list>
</div>
</div>
<div class="col-md-3 col-6 m-b-30">
<div class="listContainer">
<h5 class="f-s-16 f-w-600 m-b-30">Forms</h5>
<mat-list role="list" class="p-y-0">
@for (item of formsItems; track item) {
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
{{ item.title }}
</a>
}
</mat-list>
</div>
</div>
<div class="col-md-3 col-6 m-b-30">
<div class="listContainer">
<h5 class="f-s-16 f-w-600 m-b-30">Tables</h5>
<mat-list role="list" class="p-y-0">
@for (item of tablesItems; track item) {
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
{{ item.title }}
</a>
}
</mat-list>
</div>
</div>
<div class="col-md-3 col-6 m-b-30">
<h5 class="f-s-16 f-w-600 m-b-30">Follow us</h5>
<div class="d-flex align-items-center gap-20">
@for (icon of socialIcons; track icon.src) {
<img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
class="cursor-pointer" />
}
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between p-y-30 b-t-1 flex-wrap">
<!-- Left side -->
<div class="d-flex align-items-center gap-4">
<img src="assets/images/landingpage/favicon.png" alt="logo" width="20" height="15" />
<h6 class="f-s-16 f-w-500">All rights reserved by Modernize.</h6>
</div>
<!-- Right side -->
<div class="d-flex justify-content-end align-items-center">
<p class="f-s-16 m-0">
Designed & Developed by
<a href="https://adminmart.com/" target="_blank" class="text-decoration-none text-primary">
AdminMart </a>.
</p>
</div>
</div>
</div>
</div>
</div>

13
theme/packages/rtl/src/app/pages/front-pages/footer/footer.component.scss Normal file
View File

@@ -0,0 +1,13 @@
.footer-content{
.custom-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
}
.imgStyleDash {
position: absolute;
}

23
theme/packages/rtl/src/app/pages/front-pages/footer/footer.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FooterComponent]
})
.compileComponents();
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

95
theme/packages/rtl/src/app/pages/front-pages/footer/footer.component.ts Normal file
View File

@@ -0,0 +1,95 @@
import { Component } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-footer',
imports: [MaterialModule, IconModule, RouterLink],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss'
})
export class FooterComponent {
applicationsItems = [
{
title: 'Kanban',
href: "/apps/kanban"
},
{
title: 'Invoice List',
href: "/apps/invoice/list"
},
{
title: 'eCommerce',
href: "/apps/product/shop"
},
{
title: 'Chats',
href: "/apps/chat"
},
{
title: 'Tickets',
href: "/apps/tickets"
},
{
title: 'Blog',
href: "/apps/blog/post"
},
];
formsItems = [
{
title: 'Form Layout',
href: "/forms/form-layouts"
},
{
title: 'Form Horizontal',
href: "/forms/form-horizontal"
},
{
title: 'Form Wizard',
href: "/forms/form-wizard"
},
{
title: 'Form Vertical',
href: "/forms/form-vertical"
},
{
title: 'Form Toastr',
href: "/forms/form-toastr"
},
];
tablesItems = [
{
title: 'Basic Table',
href: "/tables/basic-table"
},
{
title: 'Multi Header Footer Table',
href: "/tables/multi-header-footer-table"
},
{
title: 'Pagination Table',
href: "/tables/pagination-table"
},
{
title: 'Dynamic Table',
href: "/tables/dynamic-table"
},
{
title: 'HTTP Table',
href: "/tables/http-table"
},
{
title: 'Sortable Table',
href: "/tables/sortable-table"
},
];
socialIcons = [
{ src: 'assets/images/front-pages/icon-facebook.svg', tooltip: 'Facebook' },
{ src: 'assets/images/front-pages/icon-twitter.svg', tooltip: 'Twitter' },
{ src: 'assets/images/front-pages/icon-instagram.svg', tooltip: 'Instagram' },
];
}

28
theme/packages/rtl/src/app/pages/front-pages/front-pages.routes.ts Normal file
View File

@@ -0,0 +1,28 @@
import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { HomepageDetailsComponent } from './homepage-details/homepage-details.component';
import { BlogComponent } from './blog/blog.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { PricingComponent } from './pricing/pricing.component';
import { ContactComponent } from './contact/contact.component';
import { BlogDetailsComponent } from './blog-details/blog-details.component';
export const FrontPagesRoutes: Routes = [
{
path: '',
component: HomepageComponent, // acts as layout shell
children: [
{ path: '', redirectTo: 'homepage', pathMatch: 'full' },
{ path: 'homepage', component: HomepageDetailsComponent }, // real homepage content
{ path: 'about', component: AboutUsComponent },
{path:'blog',component:BlogComponent },
{ path: 'portfolio', component: PortfolioComponent },
{ path: 'pricing', component: PricingComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'blog-details', component: BlogDetailsComponent },
],
},
];

768
theme/packages/rtl/src/app/pages/front-pages/front-pagesData.ts Normal file
View File

@@ -0,0 +1,768 @@
interface cardimgs {
id: number;
time: string;
imgSrc: string;
user: string;
title: string;
views: string;
category: string;
comments: number;
date: string;
}
interface productcards {
id: number;
imgSrc: string;
title: string;
price: string;
rprice: string;
date: string;
}
interface Framework {
src: string;
alt: string;
tooltip: string;
}
interface followercards {
id: number;
imgSrc: string;
title: string;
}
interface setupCards {
id: number;
img: string;
color: string;
title: string;
subtitle: string;
imgMain?:string;
}
export const cardimgs: cardimgs[] = [
{
id: 1,
time: '2 mins Read',
imgSrc: '/assets/images/blog/blog-img1.jpg',
user: '/assets/images/profile/user-1.jpg',
title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
views: '9,125',
category: 'Social',
comments: 3,
date: 'Mon, Dec 23',
},
{
id: 2,
time: '3 mins Read',
imgSrc: '/assets/images/blog/blog-img2.jpg',
user: '/assets/images/profile/user-2.jpg',
title:
'Intel loses bid to revive antitrust case against patent foe Fortress',
views: '9,125',
category: 'Gadget',
comments: 3,
date: 'Sun, Dec 23',
},
{
id: 3,
time: '4 mins Read',
imgSrc: '/assets/images/blog/blog-img3.jpg',
user: '/assets/images/profile/user-3.jpg',
title: 'COVID outbreak deepens as more lockdowns loom in China',
views: '9,125',
category: 'Health',
comments: 12,
date: 'Sat, Dec 23',
},
{
id: 4,
time: '2 mins Read',
imgSrc: '/assets/images/blog/blog-img4.jpg',
user: '/assets/images/profile/user-1.jpg',
title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
views: '9,125',
category: 'Social',
comments: 3,
date: 'Mon, Dec 23',
},
{
id: 5,
time: '3 mins Read',
imgSrc: '/assets/images/blog/blog-img5.jpg',
user: '/assets/images/profile/user-2.jpg',
title:
'Intel loses bid to revive antitrust case against patent foe Fortress',
views: '9,125',
category: 'Gadget',
comments: 3,
date: 'Sun, Dec 23',
},
{
id: 6,
time: '4 mins Read',
imgSrc: '/assets/images/blog/blog-img6.jpg',
user: '/assets/images/profile/user-3.jpg',
title: 'COVID outbreak deepens as more lockdowns loom in China',
views: '9,125',
category: 'Health',
comments: 12,
date: 'Sat, Dec 23',
},
{
id: 7,
time: '2 mins Read',
imgSrc: '/assets/images/blog/blog-img10.jpg',
user: '/assets/images/profile/user-1.jpg',
title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
views: '9,125',
category: 'Social',
comments: 3,
date: 'Mon, Dec 23',
},
{
id: 8,
time: '3 mins Read',
imgSrc: '/assets/images/blog/blog-img8.jpg',
user: '/assets/images/profile/user-2.jpg',
title:
'Intel loses bid to revive antitrust case against patent foe Fortress',
views: '9,125',
category: 'Gadget',
comments: 3,
date: 'Sun, Dec 23',
},
{
id: 9,
time: '4 mins Read',
imgSrc: '/assets/images/blog/blog-img9.jpg',
user: '/assets/images/profile/user-3.jpg',
title: 'COVID outbreak deepens as more lockdowns loom in China',
views: '9,125',
category: 'Health',
comments: 12,
date: 'Sat, Dec 23',
},
];
export const productcards: productcards[] = [
{
id: 1,
imgSrc: 'assets/images/products/s4.jpg',
title: 'Boat Headphone',
price: '285',
rprice: '375',
date: 'Tue, Apr 03, 2025',
},
{
id: 2,
imgSrc: 'assets/images/products/s5.jpg',
title: 'MacBook Air Pro',
price: '285',
rprice: '375',
date: 'Tue, Apr 10, 2025',
},
{
id: 3,
imgSrc: 'assets/images/products/s7.jpg',
title: 'Red Velvet Dress',
price: '285',
rprice: '375',
date: 'Tue, Apr 15, 2025',
},
{
id: 4,
imgSrc: 'assets/images/products/s11.jpg',
title: 'Soft Plush Teddy',
price: '285',
rprice: '375',
date: 'Tue, Apr 12, 2025',
},
{
id: 5,
imgSrc: 'assets/images/products/s2.jpg',
title: 'Boat Bass Booster',
price: '285',
rprice: '375',
date: 'Tue, Apr 14, 2025',
},
{
id: 6,
imgSrc: 'assets/images/products/s6.jpg',
title: 'MacBook Ultra Slim',
price: '285',
rprice: '375',
date: 'Tue, Apr 18, 2025',
},
{
id: 7,
imgSrc: 'assets/images/products/s8.jpg',
title: 'Crimson Party Dress',
price: '285',
rprice: '375',
date: 'Tue, Apr 20, 2025',
},
{
id: 8,
imgSrc: 'assets/images/products/s12.jpg',
title: 'Cuddly Teddy Gift',
price: '285',
rprice: '375',
date: 'Tue, Apr 22, 2025',
},
{
id: 9,
imgSrc: 'assets/images/products/s4.jpg',
title: 'Boat Sonic Headset',
price: '285',
rprice: '375',
date: 'Tue, Apr 25, 2025',
},
{
id: 10,
imgSrc: 'assets/images/products/s5.jpg',
title: 'MacBook Pro 2025',
price: '285',
rprice: '375',
date: 'Tue, Apr 27, 2025',
},
{
id: 11,
imgSrc: 'assets/images/products/s7.jpg',
title: 'Evening Gown - Red',
price: '285',
rprice: '375',
date: 'Tue, Apr 29, 2025',
},
{
id: 12,
imgSrc: 'assets/images/products/s11.jpg',
title: 'Fluffy Bear Surprise',
price: '285',
rprice: '375',
date: 'Tue, Apr 30, 2025',
},
];
export const frameworks: Framework[] = [
{
src: 'assets/images/landingpage/frameworks/angular.svg',
alt: 'Angular',
tooltip: 'Angular',
},
{
src: 'assets/images/landingpage/frameworks/material.svg',
alt: 'Angular Material',
tooltip: 'Angular Material',
},
{
src: 'assets/images/landingpage/frameworks/logo-ts.svg',
alt: 'Typescript',
tooltip: 'Typescript',
},
{
src: 'assets/images/landingpage/frameworks/icon-tabler.svg',
alt: 'Tabler Icon',
tooltip: 'Tabler Icon',
},
];
export const tiles = [
{
id: 1,
text: 'Light & Dark Color Schemes',
cols: 1,
rows: 1,
color: '#FFF6E5',
icon: 'svgs/icon-briefcase.svg',
subtitle: 'Choose your preferred visual style effortlessly.',
},
{
id: 2,
text: 'New Demos',
cols: 2,
rows: 2,
color: '#E9F1FF',
icon: 'logos/logoIcon.svg',
img: 'landingpage/background/screen1.png',
subtitle:
'Brand new demos to help you build the perfect dashboard:<br><strong>Dark and Right-to-Left.</strong>',
},
{
id: 3,
text: 'Code Improvements',
cols: 1,
rows: 1,
color: '#E7FFF2',
icon: 'logos/icon-speech-bubble.svg',
subtitle: 'Benefit from continuous improvements and optimizations.',
},
{
id: 4,
text: '12+ Ready to Use Application Designs',
cols: 1,
rows: 1,
color: '#E4F4FF',
icon: 'icon-layer.svg',
img: 'landingpage/background/feature-apps.png',
subtitle: 'Instantly deployable designs for your applications.',
},
{
id: 5,
text: '50+ UI Components',
cols: 1,
rows: 1,
color: '#FFECEC',
icon: 'logos/icon-favorites.svg',
subtitle: 'A rich collection for seamless user experiences.',
},
];
export const users = [
{ name: 'Jenny Wilson', img: '/assets/images/profile/user-1.jpg' },
{ name: 'Robert Fox', img: '/assets/images/profile/user-2.jpg' },
{ name: 'Kristin Watson', img: '/assets/images/profile/user-3.jpg' },
{ name: 'Darlene Robertson', img: '/assets/images/profile/user-4.jpg' },
{ name: 'Jacob Jones', img: '/assets/images/profile/user-5.jpg' },
];
export const plans = [
{
title: 'Single Use',
description:
'Use for single end product which end users can’t be charged for.',
price: 49,
period: 'one time pay',
features: [
{ text: 'Full source code', included: true },
{ text: 'Documentation', included: true },
{ text: 'Use in SaaS app', included: false },
{ text: 'One Project', included: true, bold: true },
{ text: 'One Year Technical Support', included: true },
{ text: 'One Year Free Updates', included: true },
],
},
{
title: 'Multiple Use',
description:
'Use for unlimited end products end users can’t be charged for.',
price: 89,
period: 'one time pay',
features: [
{ text: 'Full source code', included: true },
{ text: 'Documentation', included: true },
{ text: 'Use in SaaS app', included: false },
{ text: 'Unlimited Project', included: true, bold: true },
{ text: 'One Year Technical Support', included: true },
{ text: 'One Year Free Updates', included: true },
],
},
{
title: 'Extended Use',
description:
'Use for single end product which end users can be charged for.',
price: 299,
period: 'one time pay',
popular: true,
features: [
{ text: 'Full source code', included: true },
{ text: 'Documentation', included: true },
{ text: 'Use in SaaS app', included: true },
{ text: 'One Project', included: true, bold: true },
{ text: 'One Year Technical Support', included: true },
{ text: 'One Year Free Updates', included: true },
],
},
{
title: 'Unlimited Use',
description:
'Use in unlimited end products end users can be charged for.',
price: 499,
period: 'one time pay',
features: [
{ text: 'Full source code', included: true },
{ text: 'Documentation', included: true },
{ text: 'Use in SaaS app', included: true },
{ text: 'Unlimited Project', included: true, bold: true },
{ text: 'One Year Technical Support', included: true },
{ text: 'One Year Free Updates', included: true },
],
},
];
export const paymentLogos = [
{ src: 'assets/images/front-pages/icon-visa.svg', alt: 'visa', tooltip: 'Visa' },
{
src: 'assets/images/front-pages/icon-mastercard.svg',
alt: 'mastercard',
tooltip: 'Master Card',
},
{
src: 'assets/images/front-pages/icon-american-express.svg',
alt: 'american express',
tooltip: 'American Express',
},
{
src: 'assets/images/front-pages/icon-discover.svg',
alt: 'discover',
tooltip: 'Discover',
},
{
src: 'assets/images/front-pages/icon-paypal.svg',
alt: 'paypal',
tooltip: 'Paypal',
},
{
src: 'assets/images/front-pages/icon-masetro.svg',
alt: 'maestro',
tooltip: 'Maestro',
},
{ src: 'assets/images/front-pages/icon-jcb.svg', alt: 'jcb', tooltip: 'JCB' },
{
src: 'assets/images/front-pages/icon-diners.svg',
alt: 'diners',
tooltip: 'Diners',
},
];
export const faqList = [
{
question: 'What is included with my purchase?',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
{
question: 'Are there any recurring fees?',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
{
question: 'Can i use template on multiple projects? ',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
{
question:
'Can i use customize the admin dashboard template to match my brand?',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
{
question: 'Are any restrictions on using the template?',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
{
question: 'How can i get support after purchase? ',
answer:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
},
];
export const followercardsFirst: followercards[] = [
{
id: 1,
imgSrc: '/assets/images/front-pages/icon-color.svg',
title: '6 Themes Colors',
},
{
id: 2,
imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
title: 'Dard & Light Sidebar',
},
{
id: 3,
imgSrc: '/assets/images/front-pages/icon-components.svg',
title: '50+ UI Components',
},
{
id: 4,
imgSrc: '/assets/images/front-pages/icon-pages.svg',
title: '65+ pages Templates',
},
{
id: 5,
imgSrc: '/assets/images/front-pages/icon-color.svg',
title: '6 Themes Colors',
},
{
id: 6,
imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
title: 'Dard & Light Sidebar',
},
{
id: 7,
imgSrc: '/assets/images/front-pages/icon-components.svg',
title: '50+ UI Components',
},
{
id: 8,
imgSrc: '/assets/images/front-pages/icon-pages.svg',
title: '65+ pages Templates',
},
{
id: 9,
imgSrc: '/assets/images/front-pages/icon-color.svg',
title: '6 Themes Colors',
},
{
id: 10,
imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
title: 'Dard & Light Sidebar',
},
{
id: 11,
imgSrc: '/assets/images/front-pages/icon-components.svg',
title: '50+ UI Components',
},
{
id: 12,
imgSrc: '/assets/images/front-pages/icon-pages.svg',
title: '65+ pages Templates',
},
];
export const followercardSecond: followercards[] = [
{
id: 1,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Material UI',
},
{
id: 2,
imgSrc: '/assets/images/front-pages/icon-icons.svg',
title: '3400+ icons',
},
{
id: 3,
imgSrc: '/assets/images/front-pages/icon-responsive.svg',
title: 'Fully responsive',
},
{
id: 4,
imgSrc: '/assets/images/front-pages/icon-sass.svg',
title: 'Sassbase css',
},
{
id: 5,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Material UI',
},
{
id: 6,
imgSrc: '/assets/images/front-pages/icon-icons.svg',
title: '3400+ icons',
},
{
id: 7,
imgSrc: '/assets/images/front-pages/icon-responsive.svg',
title: 'Fully responsive',
},
{
id: 8,
imgSrc: '/assets/images/front-pages/icon-sass.svg',
title: 'Sassbase css',
},
{
id: 9,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Material UI',
},
{
id: 10,
imgSrc: '/assets/images/front-pages/icon-icons.svg',
title: '3400+ icons',
},
{
id: 11,
imgSrc: '/assets/images/front-pages/icon-responsive.svg',
title: 'Fully responsive',
},
{
id: 12,
imgSrc: '/assets/images/front-pages/icon-sass.svg',
title: 'Sassbase css',
},
];
export const followercardThird: followercards[] = [
{
id: 1,
imgSrc: '/assets/images/front-pages/icon-customize.svg',
title: 'Easy to Customize',
},
{
id: 2,
imgSrc: '/assets/images/front-pages/icon-chart.svg',
title: 'Lots of Chart Options',
},
{
id: 3,
imgSrc: '/assets/images/front-pages/icon-table.svg',
title: 'Lots of Table Examples',
},
{
id: 4,
imgSrc: '/assets/images/front-pages/icon-update.svg',
title: 'Regular Updates',
},
{
id: 5,
imgSrc: '/assets/images/front-pages/icon-support.svg',
title: 'Dedicated Support',
},
{
id: 6,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Easy to Customize',
},
{
id: 7,
imgSrc: '/assets/images/front-pages/icon-icons.svg',
title: 'Lots of Chart Options',
},
{
id: 8,
imgSrc: '/assets/images/front-pages/icon-responsive.svg',
title: 'Lots of Table Examples',
},
{
id: 9,
imgSrc: '/assets/images/front-pages/icon-sass.svg',
title: 'Regular Updates',
},
{
id: 10,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Dedicated Support',
},
{
id: 11,
imgSrc: '/assets/images/front-pages/icon-framework.svg',
title: 'Easy to Customize',
},
{
id: 12,
imgSrc: '/assets/images/front-pages/icon-icons.svg',
title: 'Lots of Chart Options',
},
];
export const topcardsGrid = [
{ title: 'Light & Dark Color Schemes', subtitle: 'Choose your preferred visual style effortlessly.',
img: '/assets/images/svgs/icon-briefcase.svg', color: 'warning' },
{ title: '12+ Ready to Use Application Designs', subtitle: 'Instantly deployable designs for your applications.',
img: 'assets/icons/icon2.png', color: 'secondary',imgMain: '/assets/images/landingpage/background/feature-apps.png', },
{ title: 'New Demos', subtitle: 'Brand new demos to help you build the perfect dashboard: <strong>Dark and Right-to-Left.</strong>',
img: '/assets/images/front-pages/logoIcon.svg', color: 'primary',imgMain: '/assets/images/landingpage/background/screen1.png' },
{ title: 'Code Improvements', subtitle: 'Benefit from continuous improvements and optimizations.',
img: '/assets/images/front-pages/icon-speech-bubble.svg', color: 'success' },
{ title: '50+ UI Components', subtitle: 'A rich collection for seamless user experiences.',
img: '/assets/images/front-pages/icon-favorites.svg', color: 'error' },
];
export const setupCards:setupCards[] = [
{
id: 1,
color: 'warning',
img: '/assets/images/svgs/icon-briefcase.svg',
title: 'Light & Dark Color Schemes',
subtitle: 'Choose your preferred visual style effortlessly.',
},
{
id: 2,
color: 'secondary',
img: '/assets/images/svgs/icon-connect.svg',
title: '12+ Ready to Use Application Designs',
subtitle: 'Instantly deployable designs for your applications.',
imgMain: '/assets/images/landingpage/background/feature-apps.png'
},
{
id: 3,
color: 'success',
img: '/assets/images/svgs/icon-speech-bubble.svg',
title: 'Code Improvements',
subtitle: 'Benefit from continuous improvements and optimizations.',
},
{
id: 4,
color: 'error',
img: '/assets/images/svgs/icon-favorites.svg',
title: '50+ UI Components',
subtitle: 'A rich collection for seamless user experiences.',
},
];
export const stats = [
{
label: 'Founded',
value: '2019',
description: 'When we founded Modernize',
},
{
label: 'Growth',
value: '1,400%',
description: 'Revenue growth in 2024',
},
{
label: 'Customers',
value: '300k+',
description: 'Customers on Modernize',
},
{
label: 'Dashboards',
value: '25k+',
description: 'Dashboards built using Modernize',
},
];
export const team = [
{id: 1,
name: 'Alex Martinez',
position: 'CEO & Co-Founder',
image: 'assets/images/front-pages/user1.jpg'
},
{
id: 2,
name: 'Jordan Nguyen',
position: 'CTO & Co-Founder',
image: 'assets/images/front-pages/user2.jpg'
},
{
id: 3,
name: 'Taylor Roberts',
position: 'Product Manager',
image: 'assets/images/front-pages/user3.jpg'
},
{id: 4,
name: 'Morgan Patel',
position: 'Lead Developer',
image: 'assets/images/front-pages/user4.jpg'
},
{
id: 5,
name: 'Andrew Grant',
position: 'Product Manager',
image: 'assets/images/front-pages/user5.jpg'
},
{
id: 6,
name: 'Leo Pratt',
position: 'Lead Developer',
image: 'assets/images/front-pages/user3.jpg'
},
{
id: 7,
name: 'C. A. Nunez',
position: 'CEO & Co-Founder',
image: 'assets/images/front-pages/user2.jpg'
},
{
id: 8,
name: 'Leo Maxwell',
position: 'Lead Developer',
image: 'assets/images/front-pages/user1.jpg'
}
];

603
theme/packages/rtl/src/app/pages/front-pages/homepage-details/homepage-details.component.html Normal file
View File

@@ -0,0 +1,603 @@
<div class="home-page">
<div class="bg-light-primary home-page-header">
<div class="header-container-content custom-container m-x-auto">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="banner-title text-center m-t-48">
Most powerful &
<span class="text-primary">developer friendly </span>
dashboard
</h1>
</div>
</div>
<div class="row align-items-end justify-content-center">
@if(!isMobileView){
<div class="col-md-3 d-none d-lg-block cardPosition">
<img src="assets/images/front-pages/banner-top-left.svg" alt="banner-top-left"
class="img-fluid rounded-8 float-image w-100" />
</div>
}
<div class="col-md-6 m-b-10">
<div class="row m-t-24">
<div class="col-12 d-flex gap-20 align-items-center justify-content-center chipContainer">
<div class="social-chips flex-shrink-0">
<img src="assets/images/profile/user-2.jpg" width="40" alt="social" class="rounded-circle" />
<img src="assets/images/profile/user-3.jpg" width="40" alt="social" class="rounded-circle" />
<img src="assets/images/profile/user-4.jpg" width="40" alt="social" class="rounded-circle" />
</div>
<div class="f-s-16 f-w-500">
52,589+ developers & agencies using our templates
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center m-t-24 gap-20 loginBtn">
<a mat-flat-button color="primary" [routerLink]="'/authentication/login'"><span
class="p-y-10">Login</span></a>
<div class="d-flex align-items-center" matRipple [matRippleCentered]="centered"
[matRippleDisabled]="disabled" [matRippleUnbounded]="unbounded" [matRippleRadius]="radius"
[matRippleColor]="color" [ngClass]="{
'rounded bg-light-primary': showBackground,
'p-y-2': true,
'p-x-7': true
}" (click)="openDialog(true)">
<button mat-mini-fab class="text-primary play-button m-l-10"
aria-label="Example icon button with a delete icon">
<i-tabler class="icon-18 d-flex margin-auto" name="player-play"></i-tabler></button><span
class="textSee f-s-14 f-w-500 m-x-10">
See how it works</span>
</div>
</div>
<div class="d-flex align-items-center gap-20 justify-content-center framework m-t-32">
@for (framework of frameworks; track framework.tooltip) {
<a href="javascript:void(0)"
class="rounded-8 m-b-0 bg-white icon-54 d-flex align-items-center justify-content-center"
matTooltip="{{ framework.tooltip }}" matTooltipPosition="below">
<img [src]="framework.src" [alt]="framework.alt" class="" width="28" height="28" />
</a>
}
</div>
</div>
@if(!isMobileView){
<div class="col-md-3 d-none d-lg-block cardPositionTwo">
<img src="assets/images/front-pages/banner-top-right.svg" alt="banner-top-right"
class="img-fluid rounded-8 float-image w-100" />
</div>
}
</div>
@if (!isMobileView) {
<div class="row d-none d-lg-block m-t-30">
<div class="col-12">
<img src="assets/images/front-pages/bottom-part.svg" alt="bottom-part" class="w-100 img-fluid d-block" />
</div>
</div>
}
</div>
</div>
<div class="introducing-section dashboardCards spacing-top-bottom">
<div class="container card-container">
<div class="row justify-content-center">
<div class="col-md-6">
<p class="text-center m-t-0">
Introducing Modernize's Light & Dark Skins, Exceptional Dashboards,
and Dynamic Pages - Stay Updated on What's New!
</p>
</div>
</div>
<!--new-->
<!-- DESKTOP VIEW -->
@if (!isMobileView) {
<div class="row m-t-24">
<!-- Column 1: Light & Dark + 12+ Designs -->
<div class="col-md-4">
<div>
@for (topcard of topcards; track topcard.title) {
@if (topcard.title === 'Light & Dark Color Schemes' || topcard.title.includes('12+')) {
<mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-44">
<mat-card-content>
@if (topcard.title === 'Light & Dark Color Schemes') {
<img [src]="topcard.img" alt="icon" width="40" />
}
<h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
<p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
@if (topcard.title.includes('12+')) {
<img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-16 m-b--48" />
}
</mat-card-content>
</mat-card>
}
}
</div>
</div>
<div class="col-md-4">
<div>
@for (topcard of topcards; track topcard.title)
{
@if
(topcard.title.includes('New Demos')) {
<mat-card class="shadow-none text-center rounded-12 bg-light-{{
topcard.color
}} card-box tall-card p-x-30 p-y-48">
<mat-card-content>
<img [src]="topcard.img" alt="icon" width="40" class="" />
<h2 class="f-s-40 m-t-48 lh-lg section-sub-title">{{ topcard.title }}</h2>
<p class="f-s-14 m-t-20 m-b-0" [innerHTML]="topcard.subtitle"></p>
<img src="assets/images/landingpage/background/screen1.png" alt="demo" class="img-fluid w-100 m-t-48" />
</mat-card-content>
</mat-card>
} }
</div>
</div>
<!-- Column 2: Code Improvements + UI Components -->
<div class="col-md-4">
<div>
@for (topcard of topcards; track topcard.title) {
@if (topcard.title.includes('Code Improvements') || topcard.title.includes('UI Components')) {
<mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-48">
<mat-card-content>
<img [src]="topcard.img" alt="icon" width="40" />
<h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
<p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
</mat-card-content>
</mat-card>
}
}
</div>
</div>
</div>
}
<!-- MOBILE VIEW -->
@else {
<div class="grid-container m-t-24 m-x-0">
@for (topcard of topcards; track topcard.title) {
@if (!topcard.title.includes('New Demos')) {
<mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-24 p-y-32">
<mat-card-content>
@if (!topcard.title.includes('12+')) {
<img [src]="topcard.img" alt="icon" width="40" />
}
<h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
<p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
@if (topcard.title.includes('12+')) {
<img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-16" />
}
</mat-card-content>
</mat-card>
}
}
</div>
<div>
@for (topcard of topcards; track topcard.title)
{
@if
(topcard.title.includes('New Demos')) {
<mat-card class="shadow-none text-center rounded-12 bg-light-{{
topcard.color
}} card-box tall-card p-x-32 p-y-48">
<mat-card-content>
<img [src]="topcard.img" alt="icon" width="40" class="" />
<h6 class="f-s-40 m-t-32 tall-card-title section-sub-title">{{ topcard.title }}</h6>
<p class="f-s-14 m-t-20" [innerHTML]="topcard.subtitle"></p>
<img src="assets/images/landingpage/background/screen1.png" alt="demo" class="img-fluid w-100 m-t-30" />
</mat-card-content>
</mat-card>
} }
</div>
}
<!--end-->
</div>
</div>
<div class="tab-header">
<mat-divider></mat-divider>
<div class="container">
<mat-tab-group headerPosition="below" [(selectedIndex)]="selectedIndex" class="profileTabs">
<mat-tab>
<ng-template mat-tab-label>
<tabler-icon name="user-circle" class="m-r-10 icon-24"></tabler-icon>
<span class="tab-label f-s-18 f-w-500">Team Scheduling</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<tabler-icon name="wallet" class="m-r-10 icon-24"></tabler-icon>
<span class="tab-label f-s-18 f-w-500">Payments</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<tabler-icon name="app-window" class="m-r-10 icon-24"></tabler-icon>
<span class="tab-label f-s-18 f-w-500">Embedding</span>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<tabler-icon name="arrow-fork" class="m-r-10 icon-24"></tabler-icon>
<span class="tab-label f-s-18 f-w-500">Workflows</span>
</ng-template>
</mat-tab>
</mat-tab-group>
<!-- Tab content shown BELOW the tab group -->
<div class="row tab-header-content p-y-66 align-items-center">
<div class="col-md-6">
<div class="tabsimage">
<img src="assets/images/landingpage/background/accordian1.jpg" alt="slider-group" class="img-fluid w-100" />
</div>
</div>
<div class="col-md-6 m-t-30">
<div class="right-content m-l-24">
<h2 class="f-s-40 lh-lg section-sub-title">Defend your focus</h2>
<div class="m-y-30">
<mat-accordion multi>
<!-- Panel 0 -->
<mat-expansion-panel #panel0 [expanded]="selectedIndex === 0 || selectedIndex === 3" hideToggle
class="expansion-panel">
<mat-expansion-panel-header>
<div class="d-flex align-items-center justify-content-between w-100">
<span class="f-s-18 f-w-500">Factor in outside colleagues</span>
<tabler-icon [name]="panel0.expanded ? 'minus' : 'plus'" class="m-l-8 icon-20"></tabler-icon>
</div>
</mat-expansion-panel-header>
<div>
<p class="f-s-16 m-y-0">
Factor in availability for required attendees, and skip
checking for conflicts for optional attendees.
</p>
</div>
</mat-expansion-panel>
<!-- Panel 1 -->
<mat-expansion-panel #panel1 [expanded]="selectedIndex === 1" hideToggle class="expansion-panel">
<mat-expansion-panel-header>
<div class="d-flex align-items-center justify-content-between w-100">
<span class="f-s-18 f-w-500">Combine teammate schedules</span>
<tabler-icon [name]="panel1.expanded ? 'minus' : 'plus'" class="icon-20"></tabler-icon>
</div>
</mat-expansion-panel-header>
<div>
<p class="f-s-16 m-y-0">
Factor in availability for required attendees, and skip
checking for conflicts for optional attendees.
</p>
</div>
</mat-expansion-panel>
<!-- Panel 2 & 3 merged -->
<mat-expansion-panel #panel2 [expanded]="selectedIndex === 2" hideToggle class="expansion-panel">
<mat-expansion-panel-header>
<div class="d-flex align-items-center justify-content-between w-100">
<span class="f-s-18 f-w-500">Round robin pooling</span>
<tabler-icon [name]="panel2.expanded ? 'minus' : 'plus'" class="m-l-8 icon-20"></tabler-icon>
</div>
</mat-expansion-panel-header>
<div>
<p class="f-s-16 m-y-0">
Factor in availability for required attendees, and skip
checking for conflicts for optional attendees.
</p>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<a mat-flat-button color="primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="our-leadership spacing-top p-b-48">
<app-image-slider></app-image-slider>
</div>
<div class="toolBar bg-primary p-y-16">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<div class="social-chips flex-shrink-0">
<img src="assets/images/profile/user-2.jpg" width="44" height="44" alt="social"
class="rounded-circle m-x-1" />
<img src="assets/images/profile/user-3.jpg" width="44" height="44" alt="social"
class="rounded-circle m-x-1" />
</div>
<span class="text-white f-s-16 m-l-16">
Save valuable time and effort spent searching for a solution.
<a class="text-white f-w-600 m-l-8" href="#">Contact us now</a>
</span>
</div>
</div>
</div>
<div class="template-slider spacing-top-bottom">
<div class="custom-container">
<div class="bg-light-primary rounded-pill spacing-top-bottom template-slider-content">
<div class="spacing-left-right m-b-8">
<h2 class="f-s-40 lh-normal section-sub-title">
Discover Powerful Dozens of <br> Purpose-Fit Templates
</h2>
</div>
<div class="demo-slider overflow-hidden d-flex gap-30 spacing-bottom">
<div>
<div class="demo-slide">
<a [routerLink]="['/apps/chat']">
<img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
</a>
</div>
</div>
<div>
<div class="demo-slide">
<a (click)="onImageClick('/apps/email/inbox')">
<img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
[ngClass]="{
'img-border': selectedPath === '/apps/email/inbox'
}" />
</a>
</div>
</div>
<div>
<div class="demo-slide">
<a (click)="onImageClick('/dashboards/dashboard1')">
<img src="assets/images/front-pages/demo-main.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
[ngClass]="{
'img-border': selectedPath === '/dashboards/dashboard1'
}" />
</a>
</div>
</div>
<div>
<div class="demo-slide">
<img src="assets/images/front-pages/demo-dark.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
</div>
</div>
<div>
<div class="demo-slide">
<a (click)="onImageClick('/front-pages/homepage')">
<img src="assets/images/front-pages/demo-horizontal.jpg" alt="slide"
class="img-fluid rounded-7 sliderImg" [ngClass]="{
'img-border': selectedPath === '/front-pages/homepage'
}" />
</a>
</div>
</div>
<div>
<div class="demo-slide">
<img src="assets/images/front-pages/demo-rtl.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
</div>
</div>
<div>
<div class="demo-slide">
<img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
</div>
</div>
<div>
<div class="demo-slide">
<img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
</div>
</div>
</div>
<div class="spacing-left-right">
<div class="row">
<div class="col-md-4 text-center m-b-30">
<h3 class="f-s-18 m-b-16">High Customizability</h3>
<p class="f-s-14 m-0">
Tailor the dashboard to your exact needs. Customize layouts, color
schemes, and widgets effortlessly for a personalized user
experience.
</p>
</div>
<div class="col-md-4 text-center m-b-30">
<h3 class="f-s-18 m-b-16">Powerful Data Analytics</h3>
<p class="f-s-14 m-0">
Unlock the true potential of your data with our advanced analytics
tools. Gain valuable insights and make data-driven decisions with
ease.
</p>
</div>
<div class="col-md-4 text-center m-b-30">
<h3 class="f-s-18 m-b-16">Interactive Charts</h3>
<p class="f-s-14 m-0">
Visualize complex data sets beautifully with our interactive
graphs and charts. Quickly grasp trends and patterns for smarter
analysis.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="features spacing-bottom">
<div class="container">
<div class="row align-items-center justify-content-between">
<!--row-->
<div class="col-md-5 m-b-30">
<div class="client-margin">
<h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
about us?
</h2>
<p class="m-0">
Our users' feedback is a testament to our commitment to quality
and user satisfaction. Read what they have to say about their
journey with us.
</p>
</div>
</div>
<div class="col-md-5">
<mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
<mat-card-content>
<mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
<div class="d-flex align-items-center gap-16 m-b-24">
<div>
<img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
</div>
<h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
</div>
<p class="f-s-14 m-b-16 m-t-0">
Our users' feedback is a testament to our commitment to quality
and user satisfaction. Read what they have to say about their
journey with us.
</p>
<mat-divider></mat-divider>
<div class="d-flex align-items-center gap-10 m-t-8">
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
(click)="goPrev()">
<i-tabler name="chevron-left"
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
</button>
<span class="f-s-14">{{ displayCount() }}</span>
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
(click)="goNext()">
<i-tabler name="chevron-right"
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
</button>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
<div class="exceptional position-relative">
<div class="custom-container">
<div class="bg-light-primary rounded-8 exceptional-content spacing-top-bottom">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="lh-normal text-center f-s-40 m-b-30 section-sub-title">
Enjoy unparalleled features & exceptional flexibility.
</h2>
</div>
</div>
<div class="m-t-0">
<div class="demo-slider overflow-hidden d-flex gap-30">
<div class="row flex-nowrap overflow-auto gap-20">
@for (followercard of followercardsfirst; track followercard.title)
{
<div class="col-2">
<mat-card class="cardWithShadow demo-slide rounded-8">
<mat-card-content>
<div class="d-flex align-items-center justify-content-center x-20">
<img [src]="followercard.imgSrc" alt="icon" />
<h6 class="m-0 f-w-500 f-s-14 m-x-8">
{{ followercard.title }}
</h6>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
<div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
<div class="row flex-nowrap overflow-auto gap-20">
@for (followercard of followercardsecond; track followercard.title)
{
<div class="col-2">
<mat-card class="cardWithShadow demo-slide-two rounded-8">
<mat-card-content>
<div class="d-flex align-items-center justify-content-center x-20">
<img [src]="followercard.imgSrc" alt="icon" />
<h6 class="m-0 f-w-500 f-s-14 m-x-8">
{{ followercard.title }}
</h6>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
<div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
<div class="row flex-nowrap overflow-auto gap-20">
@for (followercard of followercardthird; track followercard.title) {
<div class="col-2">
<mat-card class="cardWithShadow demo-slide rounded-8">
<mat-card-content>
<div class="d-flex align-items-center justify-content-center x-20">
<img [src]="followercard.imgSrc" alt="icon" />
<h6 class="m-0 f-w-500 f-s-14 m-x-8">
{{ followercard.title }}
</h6>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="asked-questions spacing-top-bottom">
<div class="container">
<h2 class="f-s-40 text-center lh-normal m-b-48 section-sub-title">Frequently Asked Questions</h2>
<div class="row align-items-center justify-content-center">
<div class="col-md-8">
<mat-accordion multi class="faq-accordion m-b-48 d-block">
@for (item of faqList; track item) {
<mat-expansion-panel [expanded]="expandedIndex === $index" (opened)="expandedIndex = $index"
(closed)="expandedIndex = null" hideToggle class="b-1 expansion-panel m-b-16">
<mat-expansion-panel-header>
<mat-panel-title class="f-s-18 m-x-0">{{
item.question
}}</mat-panel-title>
<tabler-icon [name]="expandedIndex === $index ? 'minus' : 'plus'" class="m-s-auto icon-20 m-x-0 p-0">
</tabler-icon>
</mat-expansion-panel-header>
<p class="m-0">{{ item.answer }}</p>
</mat-expansion-panel>
}
</mat-accordion>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex align-items-center justify-content-center gap-4 p-y-6 p-x-10 rounded border-dash">
<span class="f-s-14">Still have a question?</span>
<a target="_blank" href="https://discord.com/invite/XujgB8ww4n"
class="text-decoration-underline text-dark f-s-14">Ask on discord</a>
<span class="f-s-14">or</span>
<a target="_blank" href="https://adminmart.com/support/"
class="text-decoration-underline text-dark f-s-14">Submit a ticket</a>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<app-footer></app-footer>
</div>
</div>
</div>

189
theme/packages/rtl/src/app/pages/front-pages/homepage-details/homepage-details.component.scss Normal file
View File

@@ -0,0 +1,189 @@
.home-page {
.custom-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
.home-page-header {
.header-container-content {
.cardPosition {
.float-image {
animation: floatUpDown 6s ease-in-out infinite;
}
}
.cardPositionTwo {
.float-image {
animation: floatUpDown 6s ease-in-out infinite;
}
}
.loginBtn {
.play-button {
background-color: transparent;
border: 2px solid var(--mat-sys-primary); // or use your theme color
color: var(--mat-sys-primary);
box-shadow: none;
}
.textSee {
cursor: pointer;
&:hover {
color: var(--mat-sys-primary);
}
}
}
}
}
.dashboardCards {
.card-container {
mat-card-content {
padding: 0px !important;
}
}
}
.tab-header {
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
.profileTabs {
background-color: var(--mdc-elevated-card-container-color) !important;
.mat-mdc-tab.mdc-tab-indicator--active {
.mdc-tab__text-label {
color: var(--mat-sys-primary);
}
}
}
}
.template-slider {
.template-slider-content {
.demo-slider {
.demo-slide {
animation: slide3d 15s linear infinite;
}
}
}
}
.features {
.cardWithShadow {
mat-card-content {
padding: 0px !important;
}
}
}
.exceptional {
.exceptional-content {
.demo-slider {
.demo-slide {
animation: slide3d 20s linear infinite;
}
.demo-slide-two {
animation: slide3dTwo 20s linear infinite;
}
}
}
}
.expansion-panel {
box-shadow: none;
background: transparent;
border-radius: 0 !important;
border-bottom: 1px solid var(--mat-sys-outline);
.mat-expansion-panel-header {
padding: 18px 0 !important;
height: auto;
}
}
.sliderImg {
max-width: 380px;
height: 300px;
}
.img-border {
border: 2px solid var(--mat-sys-secondary);
/* Blue border, change color as needed */
cursor: pointer;
}
.img-border:hover {
border-color: var(--mat-sys-secondary);
}
.border-dash {
border: 1px dashed var(--mat-sys-outline); // Initial border color (Bootstrap primary)
transition: border-color 0.3s ease;
flex-wrap: wrap;
&:hover {
border-color: var(--mat-sys-primary); // Use your Angular Material primary variable or a custom color
}
}
.faq-accordion {
.mat-expansion-panel {
border-radius: 8px !important;
.mat-expansion-panel-header {
padding: 20px 21px !important;
}
}
}
}
@keyframes floatUpDown {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px); // smaller bounce
}
}
@keyframes slide3d {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-2028px, 0, 0); // adjust based on actual slide width
}
}
@keyframes slide3dTwo {
from {
transform: translate3d(-2028px, 0, 0); // Rightward (starts left)
}
to {
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 1199px) {
.home-page-header {
padding-bottom: 48px;
}
}

23
theme/packages/rtl/src/app/pages/front-pages/homepage-details/homepage-details.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomepageDetailsComponent } from './homepage-details.component';
describe('HomepageDetailsComponent', () => {
let component: HomepageDetailsComponent;
let fixture: ComponentFixture<HomepageDetailsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HomepageDetailsComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HomepageDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

131
theme/packages/rtl/src/app/pages/front-pages/homepage-details/homepage-details.component.ts Normal file
View File

@@ -0,0 +1,131 @@
import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import {
faqList,
followercardsFirst,
followercardSecond,
followercardThird,
frameworks,
tiles,
users,
topcardsGrid,
} from '../front-pagesData';
import { CommonModule } from '@angular/common';
import { MediaMatcher } from '@angular/cdk/layout';
import { ImageSliderComponent } from '../image-slider/image-slider.component';
import { FooterComponent } from '../footer/footer.component';
import { MatDialog } from '@angular/material/dialog';
import { TemplateVideoComponent } from '../template-video/template-video.component';
import { Router, RouterModule } from '@angular/router';
@Component({
selector: 'app-homepage-details',
imports: [
MaterialModule,
IconModule,
CommonModule,
ImageSliderComponent,
FooterComponent,
RouterModule
],
templateUrl: './homepage-details.component.html',
styleUrl: './homepage-details.component.scss',
})
export class HomepageDetailsComponent {
topcards=topcardsGrid;
centered = false;
disabled = false;
unbounded = false;
radius: number;
color: string;
showBackground: boolean = false;
frameworks = frameworks;
selectedIndex = 1;
readonly dialog = inject(MatDialog);
private router = inject(Router);
private destroyRef = inject(DestroyRef); // ✅ For automatic cleanup
private mediaMatcher = inject(MediaMatcher); // ✅ Proper MediaMatcher injection
mobileQuery: MediaQueryList;
isMobileView = false;
readonly panelOpenState = signal(false);
tiles = tiles;
hideCloserBtn: boolean = true;
users = users;
expandedIndex: number | null = null;
currentIndex = signal(0); // Starting from 0
faqList = faqList;
selectedPath: string | null = null;
clicked = false;
followercardsfirst = followercardsFirst;
followercardsecond = followercardSecond;
followercardthird = followercardThird;
currentUser = computed(() => this.users[this.currentIndex()]);
displayCount = computed(() => `${this.currentIndex() + 1}/${this.users.length}`);
constructor() {
const isSmallScreen = this.mediaMatcher.matchMedia('(max-width: 599px)');
// ✅ Setup media query for max-width: 1199px
this.mobileQuery = this.mediaMatcher.matchMedia('(max-width: 1199px)');
this.isMobileView = this.mobileQuery.matches;
const listener = (e: MediaQueryListEvent) => {
this.isMobileView = e.matches;
};
// ✅ Listen to viewport changes
this.mobileQuery.addEventListener('change', listener);
// ✅ Clean up listener on component destroy
this.destroyRef.onDestroy(() => {
this.mobileQuery.removeEventListener('change', listener);
});
}
isOver(): boolean {
return this.mediaMatcher.matchMedia('(max-width: 1199px)').matches;
}
goPrev() {
if (this.currentIndex() > 0) {
this.currentIndex.update((i) => i - 1);
}
}
goNext() {
if (this.currentIndex() < this.users.length - 1) {
this.currentIndex.update((i) => i + 1);
}
}
openDialog(showBackground:boolean){
this.showBackground = showBackground;
const dialogRef = this.dialog.open(TemplateVideoComponent, {
data: {},
width: '1000px',
});
dialogRef.afterClosed().subscribe((result) => {
if (result === false) {
this.showBackground = false; // Reset or take any action
}
});
}
onImageClick(path: string) {
this.selectedPath = path;
setTimeout(() => {
this.router.navigate([path]);
}, 100); // brief delay to show border
}
}

137
theme/packages/rtl/src/app/pages/front-pages/homepage/homepage.component.html Normal file
View File

@@ -0,0 +1,137 @@
<div>
<mat-sidenav-container>
<mat-sidenav-content class="landing-page">
@if(hideCloserBtn){
<mat-toolbar
class="bg-primary d-flex justify-content-between align-items-center heightToolbar position-relative overflow-hidden">
<!-- Center text -->
<div class="text-center text-white f-s-14 f-w-500 flex-grow-1">
<span class="text-white bg-secondary m-x-12 f-s-12 p-x-8 p-y-4 rounded">New</span>
Frontend Pages Included!
</div>
<!-- Right close icon -->
<button mat-icon-button aria-label="Close" class="text-white" (click)="hideCloser()">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar>
}
<mat-toolbar class="topbar front-topbar topbar-xl m-auto bg-light-primary p-y-8"
[ngClass]="{ 'fixed-topbar': isTopbarFixed }">
<div class="custom-container full-width">
<div class="d-flex align-items-center justify-content-between">
<div class="branding p-x-0">
<app-branding></app-branding>
</div>
@if(!isMobileView){
<div class="d-none d-lg-flex justify-content-between toolBarContent">
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/about']"
[class.selected]="isActiveRoute('about')">
About Us
</button>
<button mat-button class="m-x-8 f-s-14 f-w-500 nav-item" [class.selected]="isActiveRoute('blog')"
[routerLink]="['/front-pages/blog']">
Blogs
</button>
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/portfolio']"
[class.selected]="isActiveRoute('portfolio')">
Portfolio
<span class="bg-light-primary text-primary rounded f-w-600 p-x-8 p-y-4 f-s-12 m-l-4">
New
</span>
</button>
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('dashboard')"
[routerLink]="['/dashboards/dashboard1']">
Dashboard
</button>
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('pricing')"
[routerLink]="['/front-pages/pricing']">
Pricing
</button>
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('contact')"
[routerLink]="['/front-pages/contact']">
Contact
</button>
</div>
<a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Login</a>
} @if(isMobileView){
<button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
(click)="customizerRight.toggle()">
<i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
</button>
}
</div>
</div>
</mat-toolbar>
<div class="content-scroll">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
<mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
<div class="">
<div class="branding">
<app-branding></app-branding>
</div>
<div class="">
<mat-list role="list">
<mat-list-item role="listitem">
<button mat-button class="text-dark" [routerLink]="['/front-pages/about']"
[class.selected]="isActiveRoute('about')">
About Us
</button></mat-list-item>
<mat-list-item role="listitem">
<button mat-button class="text-dark" [class.selected]="isActiveRoute('blogs')"
[routerLink]="['/front-pages/blog']">
Blogs
</button></mat-list-item>
<mat-list-item role="listitem">
<button mat-button class="text-dark" [routerLink]="['/front-pages/portfolio']"
[class.selected]="isActiveRoute('portfolio')">
Portfolio
<span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
New
</span>
</button></mat-list-item>
<mat-list-item role="listitem">
<button mat-button class="text-dark" [class.selected]="isActiveRoute('dashboard')"
[routerLink]="['/dashboards/dashboard1']">
Dashboard
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button mat-button class="text-dark" [class.selected]="isActiveRoute('pricing')"
[routerLink]="['/front-pages/pricing']">
Pricing
</button>
</mat-list-item>
<mat-list-item role="listitem">
<button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
[routerLink]="['/front-pages/contact']">
Contact
</button></mat-list-item>
<mat-list-item role="listitem" class="w-100">
<a mat-flat-button color="primary" class="w-100" [routerLink]="'/authentication/login'">Get
Started</a></mat-list-item>
</mat-list>
</div>
</div>
</mat-sidenav>
</mat-sidenav-container>
@if(showBackToTop){
<div
class="back-to-top bg-primary rounded-circle d-flex align-items-center justify-content-center shadow icon-54 cursor-pointer"
(click)="scrollToTop()">
<i-tabler name="arrow-up" class="icon-24 text-white"></i-tabler>
</div>
}
</div>

32
theme/packages/rtl/src/app/pages/front-pages/homepage/homepage.component.scss Normal file
View File

@@ -0,0 +1,32 @@
.landing-page {
.custom-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
.heightToolbar {
height: 46px;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../../../../assets/images/front-pages/topbar-bg.png);
}
.toolBarContent {
.nav-item {
&.selected {
background-color: var(--mat-sys-primary-fixed-dim);
color: var(--mat-sys-primary); // optional for visibility
transition: background-color 0.3s ease;
}
&:hover {
color: var(--mat-sys-primary);
transition: color 0.3s ease;
}
}
}
}

65
theme/packages/rtl/src/app/pages/front-pages/homepage/homepage.component.ts Normal file
View File

@@ -0,0 +1,65 @@
import { MediaMatcher } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { Component, HostListener, inject, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
import { IconModule } from 'src/app/icon/icon.module';
import { BrandingComponent } from 'src/app/layouts/full/vertical/sidebar/branding.component';
import { MaterialModule } from 'src/app/material.module';
@Component({
selector: 'app-homepage',
imports: [MaterialModule, BrandingComponent, RouterLink,
IconModule, RouterOutlet, CommonModule],
templateUrl: './homepage.component.html',
styleUrl: './homepage.component.scss'
})
export class HomepageComponent {
@ViewChild('customizerRight') customizerRight!: MatSidenav;
selected: string = ''; // default selected
mobileQuery: MediaQueryList;
isMobileView = false;
hideCloserBtn: boolean = true;
private router = inject(Router)
private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
showBackToTop: boolean;
isTopbarFixed: boolean;
constructor(private route: ActivatedRoute) {
const media = inject(MediaMatcher);
this.mobileQuery = media.matchMedia('(max-width: 1199px)');
this.isMobileView = this.mobileQuery.matches;
this.mobileQuery.addEventListener('change', (e) => {
this.isMobileView = e.matches;
this.closeSidenavIfNeeded();
});
}
closeSidenavIfNeeded() {
if (!this.isMobileView && this.customizerRight?.opened) {
this.customizerRight.close();
}
}
isOver(): boolean {
return this.mediaMatcher.matches;
}
isActiveRoute(route: string): boolean {
return this.router.url.includes(`/front-pages/${route}`);
}
hideCloser() {
this.hideCloserBtn = false;
}
getNavigate() {
this.router.navigate(['/dashboards/dashboard1'])
}
scrollToTop(): void {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
@HostListener('window:scroll', [])
onWindowScroll() {
this.showBackToTop = window.scrollY > 300;
this.isTopbarFixed = scrollY > 45;
}
}

44
theme/packages/rtl/src/app/pages/front-pages/image-slider/image-slider.component.html Normal file
View File

@@ -0,0 +1,44 @@
<div class="img-slider-content">
<div class="container img-slider">
<div class="">
<div class="row m-b-48">
<div class="col-md-5">
<h2 class="f-s-40 lh-lg m-b-24 section-sub-title">Our leadership</h2>
<div class="d-flex justify-content-between align-items-center">
<p class="m-0">
Our robust analytics offer rich insights into the information
buyers want, informing where teams
</p>
</div>
</div>
<div class="col-md-7 m-t-24 position-relative d-flex flex-column justify-content-end align-items-end">
<div class="d-flex gap-16">
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Previous" (click)="prev()">
<i-tabler name="arrow-left" class="d-flex align-items-center justify-content-center"></i-tabler>
</button>
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Next" (click)="next()">
<i-tabler name="arrow-right" class="d-flex align-items-center justify-content-center"></i-tabler>
</button>
</div>
</div>
</div>
<div class="row">
@for (member of visibleTeamMembers(); track member.id){
<div class="col-sm-6 col-md-3">
<mat-card class="cardWithShadow productcard overflow-hidden rounded-8 position-relative shadow-none">
<a routerLink="/widgets/cards">
<img [src]="member.image" alt="imgSrc" class="w-100 h-100 rounded-7" mat-card-image />
</a>
<mat-card class="position-absolute info-card text-center p-y-16 p-x-10">
<h3 class="f-w-600 m-b-8">{{ member.name }}</h3>
<p class="f-s-14 m-y-0">{{ member.position }}</p>
</mat-card>
</mat-card>
</div>
}
</div>
</div>
</div>
</div>

22
theme/packages/rtl/src/app/pages/front-pages/image-slider/image-slider.component.scss Normal file
View File

@@ -0,0 +1,22 @@
.img-slider-content {
.img-slider {
.mat-mdc-card {
margin-bottom: 0px !important;
}
.productcard {
position: relative;
.info-card {
bottom: 42px; // controls overlap depth
left: 50%;
transform: translateX(-50%);
width: 90%;
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
z-index: 2;
}
}
}
}

23
theme/packages/rtl/src/app/pages/front-pages/image-slider/image-slider.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ImageSliderComponent } from './image-slider.component';
describe('ImageSliderComponent', () => {
let component: ImageSliderComponent;
let fixture: ComponentFixture<ImageSliderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ImageSliderComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ImageSliderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

39
theme/packages/rtl/src/app/pages/front-pages/image-slider/image-slider.component.ts Normal file
View File

@@ -0,0 +1,39 @@
import { Component, computed, signal } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { team } from '../front-pagesData';
@Component({
selector: 'app-image-slider',
imports: [MaterialModule,IconModule],
templateUrl: './image-slider.component.html',
styleUrl: './image-slider.component.scss'
})
export class ImageSliderComponent {
team = team;
// Signals
currentPage = signal(0);
pageSize = 4;
visibleTeamMembers = computed(() => {
const start = this.currentPage() * this.pageSize;
const end = start + this.pageSize;
return this.team.slice(start, end);
});
next() {
console.log('next--->',this.visibleTeamMembers().map(m => m.id));
const totalPages = Math.ceil(this.team.length / this.pageSize);
if (this.currentPage() < totalPages - 1) {
this.currentPage.update((p) => p + 1);
}
}
prev() {
console.log(this.visibleTeamMembers().map(m => m.id));
if (this.currentPage() > 0) {
this.currentPage.update((p) => p - 1);
}
}
}

68
theme/packages/rtl/src/app/pages/front-pages/page-pricing/page-pricing.component.html Normal file
View File

@@ -0,0 +1,68 @@
<div class="row justify-content-center">
<div class="col-lg-7 col-sm-11">
<h2 class="f-s-40 text-center m-b-48 lh-normal section-sub-title">
111,476+ Trusted developers & many tech giants as well
</h2>
</div>
</div>
<div class="row">
@for(plan of plans;track plan){
<div class="col-lg-3 col-md-4 col-sm-6">
<mat-card class="cardWithShadow b-1">
<mat-card-content>
<div class="m-b-16 d-flex align-items-center">
<h6 class="f-s-20 f-w-600 ">
{{ plan.title }}
@if (plan.popular) {
<span class="bg-light-primary text-primary rounded f-w-600 f-s-12 p-y-2 p-x-8">
Popular
</span>
}
</h6>
</div>
<p class="f-s-12 m-b-32 m-t-0">{{ plan.description }}</p>
<mat-divider></mat-divider>
<div class="price-line m-t-32">
<span class="f-s-40 f-w-600">${{ plan.price }}</span>
<span class="f-s-14">/{{ plan.period }}</span>
</div>
<div class="m-y-32">
@for(feature of plan.features; track feature) {
<div class="d-flex align-items-center gap-8 m-b-12">
<img
[src]="feature.included ? '/assets/images/front-pages/icon-circle-check.svg' : '/assets/images/front-pages/icon-circle-x.svg'"
alt="icon-facebook-dark" width="21" height="21" />
<span [ngClass]="{
'f-w-600': feature.bold,
'f-s-14 op-5': !feature.included,
'f-s-14': feature.included
}">
{{ feature.text }}
</span>
</div>
}
</div>
<button mat-flat-button color="primary" class="w-100 ">
Purchase Now
</button>
</mat-card-content>
</mat-card>
</div>
}
</div>
<div class="m-t-32">
<p class="text-center f-s-14 m-b-0">Secured payment with PayPal & Razorpay</p>
<div class="d-flex align-items-center justify-content-center m-t-32 m-x-0 gap-48 flex-wrap">
@for( logo of paymentLogos;track logo){
<img class="cursor-pointer" [src]="logo.src" [alt]="logo.alt" [matTooltip]="logo.tooltip"
matTooltipPosition="below">
}
</div>
</div>

0
theme/packages/rtl/src/app/pages/front-pages/page-pricing/page-pricing.component.scss Normal file
View File

23
theme/packages/rtl/src/app/pages/front-pages/page-pricing/page-pricing.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PagePricingComponent } from './page-pricing.component';
describe('PagePricingComponent', () => {
let component: PagePricingComponent;
let fixture: ComponentFixture<PagePricingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PagePricingComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PagePricingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

17
theme/packages/rtl/src/app/pages/front-pages/page-pricing/page-pricing.component.ts Normal file
View File

@@ -0,0 +1,17 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { paymentLogos, plans } from '../front-pagesData';
@Component({
selector: 'app-page-pricing',
imports: [MaterialModule, IconModule, CommonModule],
templateUrl: './page-pricing.component.html',
styleUrl: './page-pricing.component.scss',
})
export class PagePricingComponent {
plans = plans;
paymentLogos = paymentLogos;
}

57
theme/packages/rtl/src/app/pages/front-pages/portfolio/portfolio.component.html Normal file
View File

@@ -0,0 +1,57 @@
<div class="banner-section bg-light-primary spacing-top-bottom">
<div class="container">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
Portfolio
</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">Explore Our Latest Works</h1>
</div>
</div>
<div class="spacing-top-bottom">
<div class="container">
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap m-b-24">
<div class="d-flex align-items-center gap-8 m-b-10">
<h5 class="f-w-500 f-s-20">Portfolio</h5>
<div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
<div class="f-s-14 lh-sm">{{ filteredCount }} </div>
</div>
</div>
<!-- Search bar pushed to the right -->
<mat-form-field appearance="outline" class="search-bar-style hide-hint">
<mat-icon matPrefix>search</mat-icon>
<input matInput placeholder="Search Photos" [(ngModel)]="searchText" (input)="onSearchChange()" />
</mat-form-field>
</div>
<div class="row">
@for(productcard of filteredCardImgs; track productcard.id) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow productcard overflow-hidden b-1 rounded">
<a routerLink="/widgets/cards">
<img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100 object-cover" height="220" mat-card-image />
</a>
<mat-card-content class="p-b-24 p-t-12 position-relative">
<mat-card-title class="mat-headline-2 f-s-16 m-b-4">
<div class="d-flex align-items-center justify-content-between">
<!-- Left Side: Text Content -->
<div>
<h6 class="f-s-16 lh-sm f-w-600">{{ productcard.title }}</h6>
<p class="f-s-12 f-w-400 m-y-0">{{ productcard.date }}</p>
</div>
<!-- Right Side: Icon -->
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
</div>
</mat-card-title>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
</div>
<div class="footer">
<app-footer></app-footer>
</div>

0
theme/packages/rtl/src/app/pages/front-pages/portfolio/portfolio.component.scss Normal file
View File

23
theme/packages/rtl/src/app/pages/front-pages/portfolio/portfolio.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PortfolioComponent } from './portfolio.component';
describe('PortfolioComponent', () => {
let component: PortfolioComponent;
let fixture: ComponentFixture<PortfolioComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PortfolioComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PortfolioComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

37
theme/packages/rtl/src/app/pages/front-pages/portfolio/portfolio.component.ts Normal file
View File

@@ -0,0 +1,37 @@
import { Component, OnInit } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { productcards } from '../front-pagesData';
import { FooterComponent } from '../footer/footer.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-portfolio',
imports: [MaterialModule, IconModule, FooterComponent, CommonModule, FormsModule],
templateUrl: './portfolio.component.html',
styleUrl: './portfolio.component.scss'
})
export class PortfolioComponent implements OnInit {
filteredCards = productcards;
searchText: string = '';
filteredCardImgs = [...this.filteredCards]; // Initialize with full data
filteredCount: number = this.filteredCardImgs.length;
ngOnInit(): void {
console.log('filteredCards', this.filteredCards)
}
onSearchChange() {
const query = this.searchText.toLowerCase().trim();
this.filteredCardImgs = this.filteredCards.filter(item =>
item.title.toLowerCase().includes(query) ||
item.date.toLowerCase().includes(query)
);
this.filteredCount = this.filteredCardImgs.length; // ✅ update the count here
}
}

18
theme/packages/rtl/src/app/pages/front-pages/pricing/pricing.component.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="banner-section bg-light-primary spacing-top-bottom">
<div class="container">
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
Pricing Page
</p>
<h1 class="text-center f-s-48 section-sub-title lh-normal">Choose Your Plan</h1>
</div>
</div>
<div class="page-pricing spacing-top-bottom">
<div class="container">
<app-page-pricing></app-page-pricing>
</div>
</div>
<div class="footer">
<app-footer></app-footer>
</div>

0
theme/packages/rtl/src/app/pages/front-pages/pricing/pricing.component.scss Normal file
View File

23
theme/packages/rtl/src/app/pages/front-pages/pricing/pricing.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PricingComponent } from './pricing.component';
describe('PricingComponent', () => {
let component: PricingComponent;
let fixture: ComponentFixture<PricingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PricingComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PricingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
theme/packages/rtl/src/app/pages/front-pages/pricing/pricing.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { FooterComponent } from '../footer/footer.component';
import { PagePricingComponent } from '../page-pricing/page-pricing.component';
@Component({
selector: 'app-pricing',
imports: [MaterialModule,IconModule,FooterComponent,PagePricingComponent],
templateUrl: './pricing.component.html',
styleUrl: './pricing.component.scss'
})
export class PricingComponent {
}

11
theme/packages/rtl/src/app/pages/front-pages/template-video/template-video.component.html Normal file
View File

@@ -0,0 +1,11 @@
<mat-dialog-content class="p-b-0">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/n-J3dDy1kro?si=k441rPIuc1bmKXJ9" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
class="rounded-8"></iframe>
</mat-dialog-content>
<div mat-dialog-actions>
<!-- <button mat-flat-button> Close</button> -->
<button mat-flat-button class="bg-light text-primary" (click)="closeDialog()">
Close
</button>
</div>

0
theme/packages/rtl/src/app/pages/front-pages/template-video/template-video.component.scss Normal file
View File

23
theme/packages/rtl/src/app/pages/front-pages/template-video/template-video.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TemplateVideoComponent } from './template-video.component';
describe('TemplateVideoComponent', () => {
let component: TemplateVideoComponent;
let fixture: ComponentFixture<TemplateVideoComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TemplateVideoComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TemplateVideoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

19
theme/packages/rtl/src/app/pages/front-pages/template-video/template-video.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import { IconModule } from 'src/app/icon/icon.module';
import { MaterialModule } from 'src/app/material.module';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-template-video',
imports: [MaterialModule,
IconModule,],
templateUrl: './template-video.component.html',
styleUrl: './template-video.component.scss'
})
export class TemplateVideoComponent {
constructor(private dialogRef: MatDialogRef<TemplateVideoComponent>){
}
closeDialog(): void {
this.dialogRef.close(false); // Pass false back to parent
}
}

69
theme/packages/rtl/src/app/pages/ui-components/slide-toggle/code/slide-toggle-ts-snippet.ts Normal file
View File

@@ -0,0 +1,69 @@
export const BASIC_SLIDE_TOGGLE_TS_SNIPPET = ` import {Component} from '@angular/core';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
/**
* @title slide-toggle
*/
@Component({
selector: 'app-slide-toggle',
imports: [MatSlideToggleModule],
templateUrl: './slide-toggle.component.html'
})
export class AppSlideToggleComponent {
constructor() {}
}
`;
export const FORM_SLIDE_TOGGLE_TS_SNIPPET = ` import {Component, inject} from '@angular/core';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import { MatSlideToggleModule} from '@angular/material/slide-toggle';
/**
* @title Slide-toggle with forms
*/
@Component({
selector: 'app-slide-toggle',
imports: [MatSlideToggleModule, FormsModule, MatButtonModule, ReactiveFormsModule,],
templateUrl: './slide-toggle.component.html'
})
export class AppSlideToggleComponent {
constructor() {}
private _formBuilder = inject(FormBuilder);
isChecked = true;
formGroup = this._formBuilder.group({
enableWifi: '',
acceptTerms: ['', Validators.requiredTrue],
});
alertFormValues(formGroup: FormGroup) {
alert(JSON.stringify(formGroup.value, null, 2));
}
}
`;
export const CONFIGURATION_SLIDE_TOGGLE_TS_SNIPPET = ` import {Component} from '@angular/core';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {FormsModule} from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
import {MatCardModule} from '@angular/material/card';
/**
* @title Configurable slide-toggle
*/
@Component({
selector: 'app-slide-toggle',
imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule],
templateUrl: './slide-toggle.component.html'
})
export class AppSlideToggleComponent {
constructor() {}
checked = false;
disabled = false;
}
`;

63
theme/packages/rtl/src/app/pages/ui-components/slide-toggle/slide-toggle.component.ts Normal file
View File

@@ -0,0 +1,63 @@
import { Component, OnInit, inject } from '@angular/core';
import {FormBuilder, FormGroup, Validators, ReactiveFormsModule} from '@angular/forms';
import {
MatSlideToggleModule,
// _MatSlideToggleRequiredValidatorModule,
} from '@angular/material/slide-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {FormsModule} from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import { AppCodeViewComponent } from 'src/app/components/code-view/code-view.component';
// snippets
import { BASIC_SLIDE_TOGGLE_HTML_SNIPPET, CONFIGURATION_SLIDE_TOGGLE_HTML_SNIPPET, FORM_SLIDE_TOGGLE_HTML_SNIPPET } from './code/slide-toggle-html-snippet';
import { BASIC_SLIDE_TOGGLE_TS_SNIPPET, CONFIGURATION_SLIDE_TOGGLE_TS_SNIPPET, FORM_SLIDE_TOGGLE_TS_SNIPPET } from './code/slide-toggle-ts-snippet';
import { Highlight, HighlightAuto } from 'ngx-highlightjs';
import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
@Component({
selector: 'app-slide-toggle',
imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule, ReactiveFormsModule, MatButtonModule,
// _MatSlideToggleRequiredValidatorModule
Highlight,
HighlightAuto,
HighlightLineNumbers,
AppCodeViewComponent,
],
templateUrl: './slide-toggle.component.html'
})
export class AppSlideToggleComponent implements OnInit {
// 1 [Basic with Slide Toggle]
codeForSlideToggleBasic = BASIC_SLIDE_TOGGLE_HTML_SNIPPET;
codeForSlideToggleBasicTs = BASIC_SLIDE_TOGGLE_TS_SNIPPET;
// 2 [Form with Slide Toggle]
codeForSlideToggleForm = FORM_SLIDE_TOGGLE_HTML_SNIPPET;
codeForSlideToggleFormTs = FORM_SLIDE_TOGGLE_TS_SNIPPET;
// 3 [Configuration with Slide Toggle]
codeForSlideToggleConfiguration = CONFIGURATION_SLIDE_TOGGLE_HTML_SNIPPET;
codeForSlideToggleConfigurationTs = CONFIGURATION_SLIDE_TOGGLE_TS_SNIPPET;
// configuration
checked = false;
disabled = false;
private _formBuilder = inject(FormBuilder);
isChecked = true;
formGroup = this._formBuilder.group({
enableWifi: '',
acceptTerms: ['', Validators.requiredTrue],
});
alertFormValues(formGroup: FormGroup) {
alert(JSON.stringify(formGroup.value, null, 2));
}
ngOnInit(): void {}
}

348
theme/packages/rtl/src/app/pages/widgets/cards/cards.component.html Normal file
View File

@@ -0,0 +1,348 @@
<!-- --------------------------------------------------------------------- -->
<!-- card 1 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(topcard of topcards; track topcard) {
<div class="col-lg-2 col-sm-4 col-6">
<mat-card class="shadow-none text-center bg-light-{{ topcard.color }} shadow-none">
<mat-card-content class="p-32">
<img [src]="topcard.img" alt="users" width="40" class="rounded-circle" />
<h4 class="f-s-14 f-w-600 text-{{ topcard.color }} m-t-8">
{{ topcard.title }}
</h4>
<h6 class="m-t-4 f-s-21 f-w-600 text-{{ topcard.color }} m-t-8">
{{ topcard.subtitle }}
</h6>
</mat-card-content>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 2 -->
<!-- --------------------------------------------------------------------- -->
<div class="row justify-content-center">
@for(cardimg of cardimgs; track cardimg.imgSrc) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow card2 position-relative card-hover">
<img mat-card-image src="{{ cardimg.imgSrc }}" alt="Photo of a Shiba Inu" />
<div class="card-overlay h-100 d-flex align-items-end justify-content-end">
<mat-chip class="f-s-12 f-w-600 m-y-16 m-r-16 bg-white">{{
cardimg.time
}}</mat-chip>
</div>
<mat-card-content class="p-y-24">
<div class="user-category">
<div>
<img src="{{ cardimg.user }}" class="rounded-circle" width="40" />
</div>
<mat-chip class="f-s-12 m-y-16 f-w-600 bg-light">{{
cardimg.category
}}</mat-chip>
</div>
<mat-card-title>{{ cardimg.title }}</mat-card-title>
<div class="d-flex align-items-center justify-content-center m-t-24">
<div class="d-flex align-items-center">
<span class="m-r-12 f-s-14 d-flex align-items-center"><i-tabler name="eye"
class="icon-18 m-r-4"></i-tabler>{{ cardimg.views }}</span>
<span class="f-s-14 d-flex align-items-center"><i-tabler name="message-2"
class="icon-18 m-r-4"></i-tabler>{{ cardimg.comments }}</span>
</div>
<span class="m-l-auto f-s-14 d-flex align-items-center">
<i-tabler name="point" class="icon-14 m-r-4 d-flex"></i-tabler>
{{ cardimg.date }}
</span>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 3 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(productcard of productcards; track productcard.title) {
<div class="col-sm-6 col-lg-3">
<mat-card class="cardWithShadow productcard overflow-hidden">
<a routerLink="/widgets/cards">
<img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100" mat-card-image />
</a>
<mat-card-content class="p-b-24 p-t-12 position-relative">
<button mat-mini-fab class="icon-30 m-t--48 d-flex bg-primary text-white" matTooltip="Add to Cart">
<i-tabler name="basket" class="icon-16 d-flex"></i-tabler>
</button>
<mat-card-title class="mat-headline-2 f-s-16 m-b-4 m-t-16">{{
productcard.title
}}</mat-card-title>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<h6 class="f-s-16 f-w-600">${{ productcard.price }}</h6>
<span class="f-s-14 m-l-4 text-decoration-line-through">${{ productcard.rprice }}</span>
</div>
<div class="m-l-auto d-flex gap-4">
<span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
<span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
<span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
<span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
<span><i-tabler name="star" class="fill-warning icon-18"></i-tabler></span>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 4 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(musiccard of musiccards; track musiccard.title) {
<div class="col-lg-4">
<mat-card class="cardWithShadow overflow-hidden">
<div class="row m-0">
<div class="col-6 p-24">
<h5 class="f-w-600 f-s-18 m-0">{{ musiccard.title }}</h5>
<span class="f-s-14">{{ musiccard.subtext }}</span>
<div class="d-flex align-items-center justify-content-between m-t-24">
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="player-skip-back" class="icon-16 d-flex"></i-tabler>
</button>
<button mat-icon-button color="warn" class="d-flex justify-content-center">
<i-tabler name="player-play" class="icon-16 d-flex"></i-tabler>
</button>
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="player-skip-forward" class="icon-16 d-flex"></i-tabler>
</button>
</div>
</div>
<div class="col-6">
<img src="{{ musiccard.imgSrc }}" width="240" height="180" class="h-100" alt="blog" />
</div>
</div>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 5 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(followercard of followercards; track followercard.title) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow">
<mat-card-content>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<img src="{{ followercard.imgSrc }}" width="40" alt="user" class="rounded-circle" />
<div class="m-l-16">
<h6 class="m-0 f-w-600 f-s-16">{{ followercard.title }}</h6>
<span class="d-flex align-items-center f-s-14"><i-tabler name="map-pin"
class="icon-14 m-r-4"></i-tabler>{{ followercard.subtext }}</span>
</div>
</div>
<button mat-flat-button color="primary" class="m-l-auto">
Follow
</button>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 6 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(friendcard of friendcards; track friendcard.title) {
<div class="col-sm-6 col-lg-3">
<mat-card class="cardWithShadow">
<mat-card-content class="p-y-24">
<img src="{{ friendcard.imgSrc }}" alt="user" width="80" class="rounded-circle" />
<mat-card-title class="m-t-16">{{ friendcard.title }}</mat-card-title>
<div class="d-flex align-items-center">
<div class="avatar-group m-r-8">
<img src="/assets/images/profile/user-1.jpg" alt="user" class="rounded-circle" width="28" />
<img src="/assets/images/profile/user-2.jpg" alt="user" class="rounded-circle" width="28" />
<img src="/assets/images/profile/user-3.jpg" alt="user" class="rounded-circle" width="28" />
</div>
<span class="f-s-14">3 mutual friends</span>
</div>
<button mat-flat-button color="primary" class="w-100 m-t-24">
Add Friend
</button>
<button mat-stroked-button color="warn" class="w-100 m-t-8">
Remove
</button>
</mat-card-content>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 7 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(socialcard of socialcards; track socialcard.username) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow overflow-hidden">
<mat-card-content class="text-center p-y-24">
<img src="{{ socialcard.imgSrc }}" class="rounded-circle" width="80" />
<mat-card-title class="f-s-18 m-b-0 m-t-16">{{
socialcard.username
}}</mat-card-title>
<mat-card-subtitle class="f-s-12 f-s-14">{{
socialcard.post
}}</mat-card-subtitle>
</mat-card-content>
<div class="b-t-1 p-x-24 p-y-8 d-flex justify-content-center bg-light-primary">
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="brand-facebook" class="icon-18 d-flex text-primary"></i-tabler>
</button>
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="brand-instagram" class="icon-18 d-flex text-error"></i-tabler>
</button>
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="brand-github" class="icon-18 d-flex text-success"></i-tabler>
</button>
<button mat-icon-button class="d-flex justify-content-center">
<i-tabler name="brand-twitter" class="icon-18 d-flex text-secondary"></i-tabler>
</button>
</div>
</mat-card>
</div>
}
</div>
<!-- --------------------------------------------------------------------- -->
<!-- card 8 -->
<!-- --------------------------------------------------------------------- -->
<div class="row">
@for(giftcard of giftcards; track giftcard.username) {
<div class="col-sm-6 col-lg-4">
<mat-card class="cardWithShadow">
<mat-card-content class="p-y-24">
<div class="d-flex justify-content-between align-items-center">
<mat-card-title class="f-s-16">{{
giftcard.username
}}</mat-card-title>
<i-tabler name="gift" class="icon-18 text-primary"></i-tabler>
</div>
<img src="{{ giftcard.imgSrc }}" alt="user" class="rounded w-100 m-t-8" />
<button mat-flat-button color="primary" class="w-100 m-t-8">
Gift to Friend ($50.00)
</button>
</mat-card-content>
</mat-card>
</div>
}
</div>
<div class="row">
<!-- column -->
<div class="col-lg-4">
<mat-card class="cardWithShadow">
<mat-card-content class="p-y-24">
<mat-card-title>Payment Gateways</mat-card-title>
<mat-card-subtitle class="f-s-14 p-b-16">Platform For Income</mat-card-subtitle>
@for(stat of stats; track stat.title) {
<div class="m-t-32">
<div class="d-flex align-items-center m-b-24">
<span class="text-{{ stat.color }} bg-light-{{
stat.color
}} rounded icon-40 d-flex align-items-center justify-content-center">
<img [src]="stat.img" alt="icon" />
</span>
<div class="m-l-16 m-r-auto">
<h6 class="f-s-16 f-w-600">{{ stat.title }}</h6>
<span class="f-s-14">{{ stat.subtitle }}</span>
</div>
<span class="f-w-600 f-s-14"> +${{ stat.percent }} </span>
</div>
</div>
}
<button mat-stroked-button color="primary" class="w-100 m-t-8">
View all Transctions
</button>
</mat-card-content>
</mat-card>
</div>
<!-- column -->
<div class="col-lg-4">
<mat-card class="cardWithShadow">
<mat-card-content class="p-t-24">
<mat-card-title>Upcoming Activity</mat-card-title>
<mat-card-subtitle class="f-s-14 p-b-16">In New year</mat-card-subtitle>
@for(activity of activities; track activity.title) {
<div>
<div class="d-flex align-items-center p-y-16">
<span class="text-{{ activity.color }} bg-light-{{
activity.color
}} rounded icon-40 d-flex align-items-center justify-content-center">
<i-tabler name="{{ activity.icon }}" class="icon-18 d-flex"></i-tabler>
</span>
<div class="m-l-16 m-r-auto">
<h6 class="f-s-16 f-w-600">{{ activity.title }}</h6>
<span class="f-s-14">{{ activity.subtitle }}</span>
</div>
<span class="f-s-14">{{ activity.time }} </span>
</div>
</div>
}
</mat-card-content>
</mat-card>
</div>
<!-- column -->
<div class="col-lg-4">
<mat-card class="cardWithShadow">
<mat-card-content class="p-y-24">
<mat-card-title>Recent Transactions</mat-card-title>
<div class="timeline m-t-24">
@for(stat of stats2; track stat.subtext) {
<div class="timeline-item d-flex overflow-hidden">
<div class="time text-right f-s-14">{{ stat.time }}</div>
<div class="point d-flex align-items-center">
<span class="timeline-badge border-{{ stat.color }} m-y-8"></span>
<span class="timline-border d-block"></span>
</div>
<div class="desc">
@if(stat.subtext) {
<span class="f-s-14 lh-20">{{ stat.subtext }}</span>
}
@if(stat.title) {
<span class="f-s-14 lh-20 f-w-600 d-block">{{
stat.title
}}</span>
}
@if(stat.link) {
<a href="#" class="text-primary text-decoration-none f-s-14">#ML-3467</a>
}
</div>
</div>
}
</div>
</mat-card-content>
</mat-card>
</div>
</div>

16
theme/packages/rtl/src/app/services/apps/front-pages/front-end.service.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { FrontEndService } from './front-end.service';
describe('FrontEndService', () => {
let service: FrontEndService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(FrontEndService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

21
theme/packages/rtl/src/app/services/apps/front-pages/front-end.service.ts Normal file
View File

@@ -0,0 +1,21 @@
import { Injectable, signal } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FrontEndService {
private blog = signal<any>(null);
constructor() { }
setBlog(blogData: any) {
this.blog.set(blogData);
}
getBlog() {
return this.blog;
}
}

BIN
theme/packages/rtl/src/assets/images/front-pages/app-chat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
theme/packages/rtl/src/assets/images/front-pages/app-email.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

16
theme/packages/rtl/src/assets/images/front-pages/banner-top-left.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

28
theme/packages/rtl/src/assets/images/front-pages/banner-top-right.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

143
theme/packages/rtl/src/assets/images/front-pages/bottom-part.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
theme/packages/rtl/src/assets/images/front-pages/demo-dark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
theme/packages/rtl/src/assets/images/front-pages/demo-horizontal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
theme/packages/rtl/src/assets/images/front-pages/demo-main.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
theme/packages/rtl/src/assets/images/front-pages/demo-rtl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
theme/packages/rtl/src/assets/images/front-pages/design-collection.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

31
theme/packages/rtl/src/assets/images/front-pages/icon-american-express.svg Normal file
View File

@@ -0,0 +1,31 @@
<svg width="81" height="34" viewBox="0 0 81 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_21817_22125)">
<path d="M7.73608 9.75H10.4861L9.11108 6.25L7.73608 9.75Z" fill="#2FABF7"/>
<path d="M41.8611 6.75C41.6111 6.625 41.2361 6.625 40.8611 6.625H38.3611V8.625H40.8611C41.2361 8.625 41.6111 8.625 41.8611 8.5C42.1111 8.375 42.2361 8 42.2361 7.625C42.3611 7.125 42.1111 6.875 41.8611 6.75Z" fill="#228FE0"/>
<path d="M68.6111 3V4.5L67.8611 3H61.9861V4.5L61.2361 3H53.2361C51.8611 3 50.7361 3.25 49.7361 3.75V3H44.1111V3.75C43.4861 3.25 42.7361 3 41.7361 3H21.6111L20.2361 6.125L18.8611 3H12.4861V4.5L11.7361 3H6.36108L3.86108 8.875L0.986084 15.375H3.86108H7.36108L8.11108 13.375H9.86108L10.6111 15.375H17.8611V13.875L18.4861 15.375H22.1111L22.7361 13.875V15.375H40.1111V12.125H40.3611C40.6111 12.125 40.6111 12.125 40.6111 12.5V15.25H49.6111V14.5C50.3611 14.875 51.4861 15.25 52.9861 15.25H56.7361L57.4861 13.25H59.2361L59.9861 15.25H67.2361V13.375L68.3611 15.25H74.2361V3H68.6111ZM26.3611 13.5H24.2361V6.625L21.2361 13.5H19.3611L16.3611 6.625V13.5H12.1111L11.2361 11.625H6.98608L6.23608 13.625H3.86108L7.61108 4.75H10.7361L14.2361 13.125V4.75H17.6111L20.3611 10.75L22.8611 4.75H26.3611V13.5ZM34.8611 6.625H29.9861V8.25H34.7361V10H29.9861V11.75H34.8611V13.625H27.8611V4.75H34.8611V6.625ZM44.2361 10.25C44.4861 10.75 44.6111 11.125 44.6111 11.875V13.625H42.4861V12.5C42.4861 12 42.4861 11.25 42.1111 10.75C41.7361 10.375 41.3611 10.375 40.6111 10.375H38.3611V13.625H36.2361V4.75H40.9861C42.1111 4.75 42.8611 4.75 43.4861 5.125C44.1111 5.5 44.4861 6.125 44.4861 7.125C44.4861 8.5 43.6111 9.25 42.9861 9.5C43.6111 9.625 43.9861 10 44.2361 10.25ZM47.9861 13.5H45.8611V4.625H47.9861V13.5ZM72.6111 13.5H69.6111L65.6111 6.875V13.5H61.3611L60.6111 11.625H56.2361L55.4861 13.625H53.1111C52.1111 13.625 50.8611 13.375 50.1111 12.625C49.3611 11.875 48.9861 10.875 48.9861 9.25C48.9861 8 49.2361 6.75 50.1111 5.75C50.7361 5 51.8611 4.75 53.2361 4.75H55.2361V6.625H53.2361C52.4861 6.625 52.1111 6.75 51.6111 7.125C51.2361 7.5 50.9861 8.25 50.9861 9.125C50.9861 10.125 51.1111 10.75 51.6111 11.25C51.9861 11.625 52.4861 11.75 53.1111 11.75H53.9861L56.8611 4.875H59.9861L63.4861 13.25V4.875H66.6111L70.2361 11V4.875H72.3611V13.5H72.6111Z" fill="#0571C1"/>
<path d="M56.9861 9.75H59.8611L58.4861 6.25L56.9861 9.75Z" fill="#228FE0"/>
<path d="M35.7361 27.75V20.625L32.4861 24.125L35.7361 27.75Z" fill="#228FE0"/>
<path d="M22.3611 21.5V23.125H26.9861V24.875H22.3611V26.75H27.4861L29.8611 24.125L27.6111 21.5H22.3611Z" fill="#2FABF7"/>
<path d="M40.4861 21.5H37.8611V23.75H40.6111C41.3611 23.75 41.8611 23.375 41.8611 22.625C41.7361 21.875 41.2361 21.5 40.4861 21.5Z" fill="#228FE0"/>
<path d="M79.1111 23.625V18H77.6111H73.8611C72.7361 18 71.8611 18.25 71.2361 18.75V18H65.4861C64.6111 18 63.4861 18.25 62.9861 18.75V18H52.8611V18.75C52.1111 18.125 50.7361 18 50.1111 18H43.3611V18.75C42.7361 18.125 41.2361 18 40.4861 18H32.9861L31.2361 19.875L29.6111 18H18.3611V30.25H29.3611L31.1111 28.375L32.7361 30.25H39.4861V27.375H40.3611C41.2361 27.375 42.3611 27.375 43.2361 27V30.375H48.8611V27.125H49.1111C49.4861 27.125 49.4861 27.125 49.4861 27.5V30.375H66.4861C67.6111 30.375 68.7361 30.125 69.3611 29.625V30.375H74.7361C75.8611 30.375 76.9861 30.25 77.7361 29.75C78.9861 29 79.7361 27.625 79.7361 26C79.7361 25.125 79.4861 24.25 79.1111 23.625ZM40.3611 25.625H37.8611V28.625H33.8611L31.3611 25.75L28.7361 28.625H20.4861V19.75H28.8611L31.3611 22.625L33.9861 19.75H40.6111C42.2361 19.75 44.1111 20.25 44.1111 22.625C43.9861 25.125 42.2361 25.625 40.3611 25.625ZM52.8611 25.125C53.1111 25.5 53.2361 26 53.2361 26.75V28.5H51.1111V27.375C51.1111 26.875 51.1111 26 50.7361 25.625C50.4861 25.25 49.9861 25.25 49.2361 25.25H46.9861V28.5H44.8611V19.625H49.6111C50.6111 19.625 51.4861 19.625 52.1111 20C52.7361 20.375 53.2361 21 53.2361 22C53.2361 23.375 52.3611 24.125 51.7361 24.375C52.3611 24.625 52.7361 24.875 52.8611 25.125ZM61.4861 21.5H56.6111V23.125H61.3611V24.875H56.6111V26.625H61.4861V28.5H54.4861V19.625H61.4861V21.5ZM66.7361 28.5H62.7361V26.625H66.7361C67.1111 26.625 67.3611 26.625 67.6111 26.375C67.7361 26.25 67.8611 26 67.8611 25.75C67.8611 25.5 67.7361 25.25 67.6111 25.125C67.4861 25 67.2361 24.875 66.8611 24.875C64.8611 24.75 62.4861 24.875 62.4861 22.125C62.4861 20.875 63.2361 19.5 65.4861 19.5H69.6111V21.625H65.7361C65.3611 21.625 65.1111 21.625 64.8611 21.75C64.6111 21.875 64.6111 22.125 64.6111 22.375C64.6111 22.75 64.8611 22.875 65.1111 23C65.3611 23.125 65.6111 23.125 65.8611 23.125H66.9861C68.1111 23.125 68.8611 23.375 69.3611 23.875C69.7361 24.25 69.9861 24.875 69.9861 25.75C69.9861 27.625 68.8611 28.5 66.7361 28.5ZM77.4861 27.625C76.9861 28.125 76.1111 28.5 74.8611 28.5H70.8611V26.625H74.8611C75.2361 26.625 75.4861 26.625 75.7361 26.375C75.8611 26.25 75.9861 26 75.9861 25.75C75.9861 25.5 75.8611 25.25 75.7361 25.125C75.6111 25 75.3611 24.875 74.9861 24.875C72.9861 24.75 70.6111 24.875 70.6111 22.125C70.6111 20.875 71.3611 19.5 73.6111 19.5H77.7361V21.625H73.9861C73.6111 21.625 73.3611 21.625 73.1111 21.75C72.8611 21.875 72.8611 22.125 72.8611 22.375C72.8611 22.75 72.9861 22.875 73.3611 23C73.6111 23.125 73.8611 23.125 74.1111 23.125H75.2361C76.3611 23.125 77.1111 23.375 77.6111 23.875C77.7361 23.875 77.7361 24 77.7361 24C78.1111 24.5 78.2361 25.125 78.2361 25.75C78.2361 26.5 77.9861 27.125 77.4861 27.625Z" fill="#0571C1"/>
<path d="M50.6111 21.75C50.3611 21.625 49.9861 21.625 49.6111 21.625H47.1111V23.625H49.6111C49.9861 23.625 50.3611 23.625 50.6111 23.5C50.8611 23.375 50.9861 23 50.9861 22.625C51.1111 22.125 50.8611 21.875 50.6111 21.75Z" fill="#228FE0"/>
<path d="M41.8611 6.75C41.6111 6.625 41.2361 6.625 40.8611 6.625H38.3611V8.625H40.8611C41.2361 8.625 41.6111 8.625 41.8611 8.5C42.1111 8.375 42.2361 8 42.2361 7.625C42.3611 7.125 42.1111 6.875 41.8611 6.75Z" fill="#228FE0"/>
<path d="M56.9861 9.75H59.8611L58.4861 6.25L56.9861 9.75Z" fill="#228FE0"/>
<path d="M35.7361 27.75V20.625L32.4861 24.125L35.7361 27.75Z" fill="#228FE0"/>
<path d="M40.4861 21.5H37.8611V23.75H40.6111C41.3611 23.75 41.8611 23.375 41.8611 22.625C41.7361 21.875 41.2361 21.5 40.4861 21.5Z" fill="#228FE0"/>
<path d="M50.6111 21.75C50.3611 21.625 49.9861 21.625 49.6111 21.625H47.1111V23.625H49.6111C49.9861 23.625 50.3611 23.625 50.6111 23.5C50.8611 23.375 50.9861 23 50.9861 22.625C51.1111 22.125 50.8611 21.875 50.6111 21.75Z" fill="#228FE0"/>
<path d="M39.6111 28.25L37.8611 26.375V28.5H33.7361L31.2361 25.625L28.4861 28.5H20.2361V19.75H28.6111L31.2361 22.625L32.4861 21.125L29.3611 18H18.3611V30.25H29.3611L31.2361 28.375L32.8611 30.25H39.6111V28.25Z" fill="#2FABF7"/>
<path d="M26.6111 15.25L24.9861 13.5H24.2361V12.75L22.3611 10.875L21.1111 13.5H19.3611L16.3611 6.625V13.5H12.1111L11.2361 11.625H6.98608L6.11108 13.5H3.86108L7.61108 4.75H10.7361L14.2361 13.125V4.75H16.1111L14.3611 3H12.4861V4.5L11.8611 3H6.36108L3.86108 8.875L0.986084 15.25H3.86108H7.48608L8.23608 13.375H9.98608L10.8611 15.25H17.8611V13.75L18.4861 15.25H22.1111L22.7361 13.75V15.25H26.6111Z" fill="#2FABF7"/>
<path d="M20.8611 9.5L18.8611 7.5L20.3611 10.75L20.8611 9.5Z" fill="#2FABF7"/>
<path d="M77.7361 29.625C78.8611 28.875 79.6111 27.625 79.7361 26.25L77.9861 24.5C78.1111 24.875 78.2361 25.25 78.2361 25.75C78.2361 26.5 77.9861 27.125 77.4861 27.625C76.9861 28.125 76.1111 28.5 74.8611 28.5H70.8611V26.625H74.8611C75.2361 26.625 75.4861 26.625 75.7361 26.375C75.8611 26.25 75.9861 26 75.9861 25.75C75.9861 25.5 75.8611 25.25 75.7361 25.125C75.6111 25 75.3611 24.875 74.9861 24.875C72.9861 24.75 70.6111 24.875 70.6111 22.125C70.6111 20.875 71.3611 19.75 73.2361 19.5L71.8611 18.125C71.6111 18.25 71.4861 18.375 71.3611 18.375V17.625H65.6111C64.7361 17.625 63.6111 17.875 63.1111 18.375V17.625H52.8611V18.375C52.1111 17.75 50.7361 17.625 50.1111 17.625H43.3611V18.375C42.7361 17.75 41.2361 17.625 40.4861 17.625H32.9861L31.2361 19.5L29.6111 17.625H28.2361L31.9861 21.375L33.8611 19.375H40.4861C42.1111 19.375 43.9861 19.875 43.9861 22.25C43.9861 24.75 42.2361 25.25 40.3611 25.25H37.8611V27.125L39.7361 29V27.125H40.3611C41.2361 27.125 42.3611 27.125 43.2361 26.75V30.125H48.8611V26.875H49.1111C49.4861 26.875 49.4861 26.875 49.4861 27.25V30.125H66.4861C67.6111 30.125 68.7361 29.875 69.3611 29.375V30.125H74.7361C75.7361 30.25 76.8611 30.125 77.7361 29.625ZM52.8611 25.125C53.1111 25.5 53.2361 26 53.2361 26.75V28.5H51.1111V27.375C51.1111 26.875 51.1111 26 50.7361 25.625C50.4861 25.25 49.9861 25.25 49.2361 25.25H46.9861V28.5H44.8611V19.625H49.6111C50.6111 19.625 51.4861 19.625 52.1111 20C52.7361 20.375 53.2361 21 53.2361 22C53.2361 23.375 52.3611 24.125 51.7361 24.375C52.3611 24.625 52.7361 24.875 52.8611 25.125ZM61.4861 21.5H56.6111V23.125H61.3611V24.875H56.6111V26.625H61.4861V28.5H54.4861V19.625H61.4861V21.5ZM66.7361 28.5H62.7361V26.625H66.7361C67.1111 26.625 67.3611 26.625 67.6111 26.375C67.7361 26.25 67.8611 26 67.8611 25.75C67.8611 25.5 67.7361 25.25 67.6111 25.125C67.4861 25 67.2361 24.875 66.8611 24.875C64.8611 24.75 62.4861 24.875 62.4861 22.125C62.4861 20.875 63.2361 19.5 65.4861 19.5H69.6111V21.625H65.7361C65.3611 21.625 65.1111 21.625 64.8611 21.75C64.6111 21.875 64.6111 22.125 64.6111 22.375C64.6111 22.75 64.8611 22.875 65.1111 23C65.3611 23.125 65.6111 23.125 65.8611 23.125H66.9861C68.1111 23.125 68.8611 23.375 69.3611 23.875C69.7361 24.25 69.9861 24.875 69.9861 25.75C69.9861 27.625 68.8611 28.5 66.7361 28.5Z" fill="#228FE0"/>
<path d="M72.7361 22.375C72.7361 22.75 72.8611 22.875 73.2361 23C73.4861 23.125 73.7361 23.125 73.9861 23.125H75.1111C75.8611 23.125 76.3611 23.25 76.8611 23.5L74.9861 21.625H73.8611C73.4861 21.625 73.2361 21.625 72.9861 21.75C72.8611 21.875 72.7361 22.125 72.7361 22.375Z" fill="#228FE0"/>
<path d="M68.3611 14.875L68.6111 15.25H68.7361L68.3611 14.875Z" fill="#228FE0"/>
<path d="M61.4861 8L63.6111 13.125V10.125L61.4861 8Z" fill="#228FE0"/>
<path d="M40.1111 12.125H40.3611C40.6111 12.125 40.6111 12.125 40.6111 12.5V15.25H49.6111V14.5C50.3611 14.875 51.4861 15.25 52.9861 15.25H56.7361L57.4861 13.25H59.2361L59.9861 15.25H67.2361V14L65.4861 12.25V13.625H61.2361L60.6111 11.625H56.2361L55.4861 13.625H53.1111C52.1111 13.625 50.8611 13.375 50.1111 12.625C49.3611 11.875 48.9861 10.875 48.9861 9.25C48.9861 8 49.2361 6.75 50.1111 5.75C50.7361 5 51.8611 4.75 53.2361 4.75H55.2361V6.625H53.2361C52.4861 6.625 52.1111 6.75 51.6111 7.125C51.2361 7.5 50.9861 8.25 50.9861 9.125C50.9861 10.125 51.1111 10.75 51.6111 11.25C51.9861 11.625 52.4861 11.75 53.1111 11.75H53.9861L56.8611 4.875H58.1111L56.3611 3.125H53.1111C51.7361 3.125 50.6111 3.375 49.6111 3.875V3.125H44.1111V3.875C43.4861 3.375 42.7361 3.125 41.7361 3.125H21.6111L20.2361 6.25L18.8611 3.125H13.3611L15.1111 4.875H17.6111L19.7361 9.5L20.4861 10.25L22.7361 4.75H26.2361V13.625H24.1111V6.75L21.9861 11.75L25.6111 15.375H39.9861L40.1111 12.125ZM45.8611 4.75H47.9861V13.625H45.8611V4.75ZM34.8611 6.625H29.9861V8.25H34.7361V10H29.9861V11.75H34.8611V13.625H27.8611V4.75H34.8611V6.625ZM38.3611 13.5H36.2361V4.625H40.9861C42.1111 4.625 42.8611 4.625 43.4861 5C44.1111 5.375 44.4861 6 44.4861 7C44.4861 8.375 43.6111 9.125 42.9861 9.375C43.4861 9.5 43.8611 9.875 43.9861 10.125C44.2361 10.625 44.3611 11 44.3611 11.75V13.5H42.2361V12.375C42.2361 11.875 42.2361 11.125 41.8611 10.625C41.7361 10.375 41.3611 10.375 40.6111 10.375H38.3611V13.5Z" fill="#228FE0"/>
</g>
<defs>
<clipPath id="clip0_21817_22125">
<rect width="80" height="34" fill="white" transform="translate(0.193115)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-chart.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M8.99963 3.51562V10.2656L3.14963 13.6406C2.75912 11.5328 3.13381 9.35478 4.20626 7.49862C5.27871 5.64246 6.97848 4.23005 8.99963 3.51562Z" fill="#5D87FF"/>
<path d="M9.37502 10.9153C9.48905 10.8495 9.58375 10.7548 9.64958 10.6407C9.7154 10.5267 9.75004 10.3973 9.75002 10.2656V3.51562C9.74935 3.39605 9.7201 3.27837 9.6647 3.1724C9.60931 3.06643 9.52939 2.97523 9.43159 2.90643C9.33379 2.83762 9.22096 2.7932 9.10251 2.77686C8.98406 2.76052 8.86341 2.77274 8.75064 2.8125C6.56156 3.58726 4.72063 5.11748 3.55878 7.12807C2.39694 9.13865 1.99038 11.4977 2.4122 13.7812C2.43407 13.8993 2.48397 14.0104 2.55771 14.1052C2.63145 14.2 2.72687 14.2757 2.83595 14.3259C2.93425 14.3719 3.0415 14.3956 3.15002 14.3953C3.28165 14.3954 3.41098 14.3608 3.52502 14.295L9.37502 10.9153ZM8.25002 4.65188V9.8325L3.76127 12.4228C3.75002 12.2812 3.75002 12.1388 3.75002 12C3.75135 10.4797 4.17216 8.98928 4.96613 7.69279C5.76011 6.3963 6.89644 5.34404 8.25002 4.65188ZM20.4694 7.17375C20.461 7.15687 20.4525 7.13906 20.4422 7.12219C20.4319 7.10531 20.4235 7.09125 20.4131 7.07625C19.5535 5.60794 18.3248 4.39001 16.8489 3.54338C15.3731 2.69675 13.7015 2.25087 12 2.25C11.8011 2.25 11.6103 2.32902 11.4697 2.46967C11.329 2.61032 11.25 2.80109 11.25 3V11.6091L3.86158 15.9122C3.77584 15.9619 3.7008 16.0281 3.6408 16.107C3.5808 16.1858 3.53703 16.2758 3.51201 16.3717C3.48699 16.4676 3.48122 16.5675 3.49504 16.6656C3.50886 16.7638 3.54199 16.8582 3.59252 16.9434C4.67652 18.7894 6.33789 20.2272 8.32025 21.0351C10.3026 21.8431 12.4958 21.9761 14.5613 21.4138C16.6268 20.8514 18.4498 19.625 19.749 17.9236C21.0482 16.2223 21.7514 14.1407 21.75 12C21.7522 10.307 21.3106 8.64297 20.4694 7.17375ZM12.75 3.78375C13.9395 3.89324 15.0911 4.25959 16.1252 4.85749C17.1593 5.4554 18.0513 6.27063 18.7397 7.24688L12.75 10.7353V3.78375ZM12 20.25C10.6907 20.2466 9.40082 19.9333 8.23591 19.3356C7.07099 18.7379 6.06416 17.8729 5.29783 16.8113L12.3666 12.6947L12.3872 12.6816L19.4906 8.54437C20.0704 9.80132 20.3247 11.184 20.2299 12.5649C20.1351 13.9459 19.6943 15.2808 18.9482 16.4468C18.2021 17.6127 17.1747 18.5722 15.9604 19.2368C14.7462 19.9014 13.3842 20.2499 12 20.25Z" fill="#5D87FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-circle-check.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53683 17.3559C7.08197 17.0665 5.7456 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.07091 7.12987C3.63856 5.75943 4.59986 4.58809 5.83323 3.76398C7.0666 2.93987 8.51664 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z" fill="#63C8FF"/>
<path d="M13.5672 7.68281C13.6253 7.74086 13.6714 7.80979 13.7029 7.88566C13.7343 7.96154 13.7505 8.04287 13.7505 8.125C13.7505 8.20713 13.7343 8.28846 13.7029 8.36434C13.6714 8.44021 13.6253 8.50914 13.5672 8.56719L9.19219 12.9422C9.13415 13.0003 9.06522 13.0464 8.98934 13.0779C8.91347 13.1093 8.83214 13.1255 8.75 13.1255C8.66787 13.1255 8.58654 13.1093 8.51067 13.0779C8.43479 13.0464 8.36586 13.0003 8.30782 12.9422L6.43282 11.0672C6.31554 10.9499 6.24966 10.7909 6.24966 10.625C6.24966 10.4591 6.31554 10.3001 6.43282 10.1828C6.55009 10.0655 6.70915 9.99965 6.875 9.99965C7.04086 9.99965 7.19992 10.0655 7.31719 10.1828L8.75 11.6164L12.6828 7.68281C12.7409 7.6247 12.8098 7.5786 12.8857 7.54715C12.9615 7.5157 13.0429 7.49951 13.125 7.49951C13.2071 7.49951 13.2885 7.5157 13.3643 7.54715C13.4402 7.5786 13.5091 7.6247 13.5672 7.68281ZM18.125 10C18.125 11.607 17.6485 13.1779 16.7557 14.514C15.8629 15.8502 14.594 16.8916 13.1093 17.5065C11.6247 18.1215 9.99099 18.2824 8.4149 17.9689C6.8388 17.6554 5.39106 16.8815 4.25476 15.7452C3.11846 14.6089 2.34463 13.1612 2.03112 11.5851C1.71762 10.009 1.87852 8.37535 2.49348 6.8907C3.10844 5.40605 4.14985 4.1371 5.486 3.24431C6.82214 2.35152 8.39303 1.875 10 1.875C12.1542 1.87727 14.2195 2.73403 15.7427 4.25727C17.266 5.78051 18.1227 7.84581 18.125 10ZM16.875 10C16.875 8.64025 16.4718 7.31104 15.7164 6.18045C14.9609 5.04987 13.8872 4.16868 12.631 3.64833C11.3747 3.12798 9.99238 2.99183 8.65876 3.2571C7.32514 3.52237 6.10013 4.17716 5.13864 5.13864C4.17716 6.10013 3.52238 7.32513 3.2571 8.65875C2.99183 9.99237 3.12798 11.3747 3.64833 12.6309C4.16868 13.8872 5.04987 14.9609 6.18046 15.7164C7.31105 16.4718 8.64026 16.875 10 16.875C11.8227 16.8729 13.5702 16.1479 14.8591 14.8591C16.1479 13.5702 16.8729 11.8227 16.875 10Z" fill="#63C8FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-circle-x.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53683 17.3559C7.08197 17.0665 5.7456 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.07091 7.12987C3.63856 5.75943 4.59986 4.58809 5.83323 3.76398C7.0666 2.93987 8.51664 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z" fill="#99AABA"/>
<path d="M12.9422 7.94219L10.8836 10L12.9422 12.0578C13.0003 12.1159 13.0463 12.1848 13.0777 12.2607C13.1092 12.3366 13.1254 12.4179 13.1254 12.5C13.1254 12.5821 13.1092 12.6634 13.0777 12.7393C13.0463 12.8152 13.0003 12.8841 12.9422 12.9422C12.8841 13.0003 12.8152 13.0463 12.7393 13.0777C12.6634 13.1092 12.5821 13.1253 12.5 13.1253C12.4179 13.1253 12.3366 13.1092 12.2607 13.0777C12.1848 13.0463 12.1159 13.0003 12.0578 12.9422L10 10.8836L7.94219 12.9422C7.88412 13.0003 7.81518 13.0463 7.73931 13.0777C7.66344 13.1092 7.58213 13.1253 7.5 13.1253C7.41788 13.1253 7.33656 13.1092 7.26069 13.0777C7.18482 13.0463 7.11588 13.0003 7.05782 12.9422C6.99975 12.8841 6.95368 12.8152 6.92226 12.7393C6.89083 12.6634 6.87466 12.5821 6.87466 12.5C6.87466 12.4179 6.89083 12.3366 6.92226 12.2607C6.95368 12.1848 6.99975 12.1159 7.05782 12.0578L9.11641 10L7.05782 7.94219C6.94054 7.82491 6.87466 7.66585 6.87466 7.5C6.87466 7.33415 6.94054 7.17509 7.05782 7.05781C7.17509 6.94054 7.33415 6.87465 7.5 6.87465C7.66586 6.87465 7.82492 6.94054 7.94219 7.05781L10 9.11641L12.0578 7.05781C12.1159 6.99974 12.1848 6.95368 12.2607 6.92225C12.3366 6.89083 12.4179 6.87465 12.5 6.87465C12.5821 6.87465 12.6634 6.89083 12.7393 6.92225C12.8152 6.95368 12.8841 6.99974 12.9422 7.05781C13.0003 7.11588 13.0463 7.18482 13.0777 7.26069C13.1092 7.33656 13.1254 7.41788 13.1254 7.5C13.1254 7.58212 13.1092 7.66344 13.0777 7.73931C13.0463 7.81518 13.0003 7.88412 12.9422 7.94219ZM18.125 10C18.125 11.607 17.6485 13.1779 16.7557 14.514C15.8629 15.8502 14.594 16.8916 13.1093 17.5065C11.6247 18.1215 9.99099 18.2824 8.4149 17.9689C6.8388 17.6554 5.39106 16.8815 4.25476 15.7452C3.11846 14.6089 2.34463 13.1612 2.03112 11.5851C1.71762 10.009 1.87852 8.37535 2.49348 6.8907C3.10844 5.40605 4.14985 4.1371 5.486 3.24431C6.82214 2.35152 8.39303 1.875 10 1.875C12.1542 1.87727 14.2195 2.73403 15.7427 4.25727C17.266 5.78051 18.1227 7.84581 18.125 10ZM16.875 10C16.875 8.64025 16.4718 7.31104 15.7164 6.18045C14.9609 5.04987 13.8872 4.16868 12.631 3.64833C11.3747 3.12798 9.99238 2.99183 8.65876 3.2571C7.32514 3.52237 6.10013 4.17716 5.13864 5.13864C4.17716 6.10013 3.52238 7.32513 3.2571 8.65875C2.99183 9.99237 3.12798 11.3747 3.64833 12.6309C4.16868 13.8872 5.04987 14.9609 6.18046 15.7164C7.31105 16.4718 8.64026 16.875 10 16.875C11.8227 16.8729 13.5702 16.1479 14.8591 14.8591C16.1479 13.5702 16.8729 11.8227 16.875 10Z" fill="#99AABA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-color.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M17.0001 10.5L7.4695 20.0306C7.32886 20.1712 7.13817 20.2501 6.93934 20.2501C6.74051 20.2501 6.54982 20.1712 6.40918 20.0306L4.4695 18.0938C4.32895 17.9531 4.25 17.7624 4.25 17.5636C4.25 17.3648 4.32895 17.1741 4.4695 17.0334L14.0001 7.5L17.0001 10.5Z" fill="#5D87FF"/>
<path d="M23.7497 14.25C23.7497 14.4489 23.6707 14.6397 23.5301 14.7803C23.3894 14.921 23.1986 15 22.9997 15H21.4997V16.5C21.4997 16.6989 21.4207 16.8897 21.2801 17.0303C21.1394 17.171 20.9486 17.25 20.7497 17.25C20.5508 17.25 20.3601 17.171 20.2194 17.0303C20.0788 16.8897 19.9997 16.6989 19.9997 16.5V15H18.4997C18.3008 15 18.1101 14.921 17.9694 14.7803C17.8288 14.6397 17.7497 14.4489 17.7497 14.25C17.7497 14.0511 17.8288 13.8603 17.9694 13.7197C18.1101 13.579 18.3008 13.5 18.4997 13.5H19.9997V12C19.9997 11.8011 20.0788 11.6103 20.2194 11.4697C20.3601 11.329 20.5508 11.25 20.7497 11.25C20.9486 11.25 21.1394 11.329 21.2801 11.4697C21.4207 11.6103 21.4997 11.8011 21.4997 12V13.5H22.9997C23.1986 13.5 23.3894 13.579 23.5301 13.7197C23.6707 13.8603 23.7497 14.0511 23.7497 14.25ZM5.74973 6.75H7.24973V8.25C7.24973 8.44891 7.32875 8.63968 7.4694 8.78033C7.61006 8.92098 7.80082 9 7.99973 9C8.19865 9 8.38941 8.92098 8.53006 8.78033C8.67072 8.63968 8.74973 8.44891 8.74973 8.25V6.75H10.2497C10.4486 6.75 10.6394 6.67098 10.7801 6.53033C10.9207 6.38968 10.9997 6.19891 10.9997 6C10.9997 5.80109 10.9207 5.61032 10.7801 5.46967C10.6394 5.32902 10.4486 5.25 10.2497 5.25H8.74973V3.75C8.74973 3.55109 8.67072 3.36032 8.53006 3.21967C8.38941 3.07902 8.19865 3 7.99973 3C7.80082 3 7.61006 3.07902 7.4694 3.21967C7.32875 3.36032 7.24973 3.55109 7.24973 3.75V5.25H5.74973C5.55082 5.25 5.36006 5.32902 5.2194 5.46967C5.07875 5.61032 4.99973 5.80109 4.99973 6C4.99973 6.19891 5.07875 6.38968 5.2194 6.53033C5.36006 6.67098 5.55082 6.75 5.74973 6.75ZM17.7497 18H16.9997V17.25C16.9997 17.0511 16.9207 16.8603 16.7801 16.7197C16.6394 16.579 16.4486 16.5 16.2497 16.5C16.0508 16.5 15.8601 16.579 15.7194 16.7197C15.5788 16.8603 15.4997 17.0511 15.4997 17.25V18H14.7497C14.5508 18 14.3601 18.079 14.2194 18.2197C14.0788 18.3603 13.9997 18.5511 13.9997 18.75C13.9997 18.9489 14.0788 19.1397 14.2194 19.2803C14.3601 19.421 14.5508 19.5 14.7497 19.5H15.4997V20.25C15.4997 20.4489 15.5788 20.6397 15.7194 20.7803C15.8601 20.921 16.0508 21 16.2497 21C16.4486 21 16.6394 20.921 16.7801 20.7803C16.9207 20.6397 16.9997 20.4489 16.9997 20.25V19.5H17.7497C17.9486 19.5 18.1394 19.421 18.2801 19.2803C18.4207 19.1397 18.4997 18.9489 18.4997 18.75C18.4997 18.5511 18.4207 18.3603 18.2801 18.2197C18.1394 18.079 17.9486 18 17.7497 18ZM21.06 7.5L7.99973 20.5603C7.71846 20.8414 7.33708 20.9993 6.93942 20.9993C6.54177 20.9993 6.16039 20.8414 5.87911 20.5603L3.93848 18.6216C3.79916 18.4823 3.68864 18.3169 3.61324 18.1349C3.53783 17.9529 3.49902 17.7578 3.49902 17.5608C3.49902 17.3638 3.53783 17.1687 3.61324 16.9867C3.68864 16.8047 3.79916 16.6393 3.93848 16.5L16.9997 3.43969C17.139 3.30036 17.3044 3.18984 17.4864 3.11444C17.6684 3.03904 17.8635 3.00023 18.0605 3.00023C18.2575 3.00023 18.4526 3.03904 18.6346 3.11444C18.8166 3.18984 18.982 3.30036 19.1213 3.43969L21.06 5.37844C21.1994 5.51773 21.3099 5.6831 21.3853 5.86511C21.4607 6.04713 21.4995 6.24221 21.4995 6.43922C21.4995 6.63623 21.4607 6.83131 21.3853 7.01332C21.3099 7.19533 21.1994 7.36071 21.06 7.5ZM15.9385 10.5L13.9997 8.56031L4.99973 17.5603L6.93848 19.5L15.9385 10.5ZM19.9997 6.43969L18.06 4.5L15.06 7.5L16.9997 9.43969L19.9997 6.43969Z" fill="#5D87FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-components.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M19.1246 15.7499C19.5137 15.7502 19.8979 15.6641 20.2496 15.4977V19.4999C20.2496 19.6988 20.1706 19.8896 20.03 20.0302C19.8893 20.1709 19.6985 20.2499 19.4996 20.2499H5.99962C5.80071 20.2499 5.60994 20.1709 5.46929 20.0302C5.32864 19.8896 5.24962 19.6988 5.24962 19.4999V15.4977C4.84952 15.687 4.40806 15.7721 3.96627 15.745C3.52447 15.7179 3.09671 15.5795 2.72274 15.3427C2.34878 15.1059 2.04075 14.7785 1.82731 14.3907C1.61388 14.0029 1.50195 13.5675 1.50195 13.1249C1.50195 12.6823 1.61388 12.2468 1.82731 11.8591C2.04075 11.4713 2.34878 11.1438 2.72274 10.907C3.09671 10.6703 3.52447 10.5319 3.96627 10.5048C4.40806 10.4777 4.84952 10.5628 5.24962 10.7521V6.74988C5.24962 6.55097 5.32864 6.3602 5.46929 6.21955C5.60994 6.0789 5.80071 5.99988 5.99962 5.99988H10.3768C10.1873 5.59978 10.1021 5.15824 10.129 4.71635C10.156 4.27446 10.2943 3.84657 10.531 3.47247C10.7678 3.09838 11.0953 2.79024 11.4831 2.57671C11.8709 2.36319 12.3064 2.25122 12.7492 2.25122C13.1919 2.25122 13.6274 2.36319 14.0152 2.57671C14.403 2.79024 14.7305 3.09838 14.9673 3.47247C15.204 3.84657 15.3423 4.27446 15.3693 4.71635C15.3962 5.15824 15.311 5.59978 15.1215 5.99988H19.4996C19.6985 5.99988 19.8893 6.0789 20.03 6.21955C20.1706 6.3602 20.2496 6.55097 20.2496 6.74988V10.7521C19.8939 10.5838 19.505 10.4976 19.1115 10.4999C18.718 10.5022 18.33 10.593 17.9764 10.7655C17.6227 10.938 17.3123 11.1877 17.0682 11.4964C16.8241 11.805 16.6524 12.1645 16.566 12.5484C16.4796 12.9323 16.4806 13.3307 16.569 13.7142C16.6573 14.0976 16.8307 14.4563 17.0764 14.7637C17.322 15.0711 17.6337 15.3193 17.9882 15.49C18.3427 15.6607 18.7311 15.7495 19.1246 15.7499Z" fill="#5D87FF"/>
<path d="M20.6507 14.8632C20.5438 14.7957 20.4215 14.7564 20.2953 14.7489C20.1691 14.7413 20.043 14.7658 19.9288 14.82C19.6431 14.9552 19.3277 15.0159 19.0122 14.9965C18.6967 14.9771 18.3912 14.8783 18.1241 14.7091C17.857 14.54 17.637 14.3061 17.4846 14.0291C17.3321 13.7522 17.2522 13.4412 17.2522 13.125C17.2522 12.8089 17.3321 12.4979 17.4846 12.221C17.637 11.944 17.857 11.7101 18.1241 11.541C18.3912 11.3718 18.6967 11.273 19.0122 11.2536C19.3277 11.2342 19.6431 11.2949 19.9288 11.43C20.0432 11.4843 20.1694 11.5087 20.2957 11.5011C20.422 11.4935 20.5444 11.454 20.6513 11.3863C20.7583 11.3187 20.8464 11.225 20.9074 11.1142C20.9685 11.0033 21.0004 10.8788 21.0004 10.7522V6.75004C21.0004 6.35222 20.8424 5.97068 20.5611 5.68938C20.2798 5.40808 19.8982 5.25004 19.5004 5.25004H16.1048C16.1187 5.12553 16.1256 5.00033 16.1254 4.87504C16.1246 4.41397 16.0298 3.95791 15.8466 3.53476C15.6635 3.11161 15.396 2.73028 15.0604 2.4141C14.5956 1.97758 14.0166 1.68166 13.3906 1.56063C12.7645 1.43959 12.117 1.49839 11.523 1.73021C10.9289 1.96203 10.4127 2.35738 10.0342 2.87049C9.65557 3.38359 9.43009 3.99344 9.38383 4.62942C9.36943 4.83626 9.37382 5.04399 9.39696 5.25004H6.0004C5.60257 5.25004 5.22104 5.40808 4.93974 5.68938C4.65843 5.97068 4.5004 6.35222 4.5004 6.75004V9.77067C4.37589 9.75671 4.25069 9.74982 4.1254 9.75004C3.66446 9.75078 3.20852 9.84562 2.78552 10.0288C2.36253 10.2119 1.98137 10.4794 1.6654 10.815C1.34716 11.1512 1.10212 11.5497 0.945752 11.9854C0.789388 12.4211 0.725102 12.8845 0.756959 13.3463C0.810704 14.1595 1.15622 14.9259 1.72996 15.5046C2.30371 16.0834 3.06711 16.4355 3.87977 16.4963C4.08662 16.5107 4.29434 16.5063 4.5004 16.4832V19.5C4.5004 19.8979 4.65843 20.2794 4.93974 20.5607C5.22104 20.842 5.60257 21 6.0004 21H19.5004C19.8982 21 20.2798 20.842 20.5611 20.5607C20.8424 20.2794 21.0004 19.8979 21.0004 19.5V15.4979C21.0005 15.3711 20.9684 15.2465 20.9073 15.1355C20.8461 15.0245 20.7579 14.9308 20.6507 14.8632ZM19.5004 19.5H6.0004V15.4979C6.00044 15.3713 5.96845 15.2468 5.90742 15.1359C5.84638 15.025 5.75829 14.9314 5.65133 14.8638C5.54437 14.7961 5.42203 14.7566 5.29571 14.749C5.16938 14.7413 5.04317 14.7658 4.92883 14.82C4.64305 14.9552 4.32773 15.0159 4.0122 14.9965C3.69666 14.9771 3.39115 14.8783 3.12407 14.7091C2.85699 14.54 2.637 14.3061 2.48457 14.0291C2.33214 13.7522 2.25221 13.4412 2.25221 13.125C2.25221 12.8089 2.33214 12.4979 2.48457 12.221C2.637 11.944 2.85699 11.7101 3.12407 11.541C3.39115 11.3718 3.69666 11.273 4.0122 11.2536C4.32773 11.2342 4.64305 11.2949 4.92883 11.43C5.04317 11.4843 5.16938 11.5087 5.29571 11.5011C5.42203 11.4935 5.54437 11.454 5.65133 11.3863C5.75829 11.3187 5.84638 11.225 5.90742 11.1142C5.96845 11.0033 6.00044 10.8788 6.0004 10.7522V6.75004H10.3776C10.5041 6.75008 10.6287 6.7181 10.7395 6.65706C10.8504 6.59603 10.944 6.50793 11.0117 6.40097C11.0793 6.29402 11.1188 6.17168 11.1265 6.04535C11.1341 5.91902 11.1097 5.79281 11.0554 5.67848C10.9202 5.39269 10.8595 5.07738 10.8789 4.76184C10.8983 4.44631 10.9972 4.1408 11.1663 3.87371C11.3354 3.60663 11.5694 3.38665 11.8463 3.23422C12.1233 3.08179 12.4343 3.00185 12.7504 3.00185C13.0665 3.00185 13.3775 3.08179 13.6545 3.23422C13.9314 3.38665 14.1654 3.60663 14.3345 3.87371C14.5036 4.1408 14.6025 4.44631 14.6219 4.76184C14.6413 5.07738 14.5806 5.39269 14.4454 5.67848C14.3911 5.79281 14.3667 5.91902 14.3743 6.04535C14.382 6.17168 14.4215 6.29402 14.4891 6.40097C14.5568 6.50793 14.6504 6.59603 14.7613 6.65706C14.8721 6.7181 14.9967 6.75008 15.1232 6.75004H19.5004V9.7716C19.2944 9.748 19.0866 9.74361 18.8798 9.75848C18.0069 9.82029 17.1921 10.2187 16.6073 10.8697C16.0226 11.5207 15.7135 12.3734 15.7454 13.2479C15.7773 14.1224 16.1475 14.9504 16.7781 15.5571C17.4087 16.1638 18.2503 16.5019 19.1254 16.5C19.2507 16.5003 19.3759 16.4934 19.5004 16.4794V19.5Z" fill="#5D87FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

4
theme/packages/rtl/src/assets/images/front-pages/icon-customize.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M19.5 12C19.5 12.5933 19.3241 13.1734 18.9944 13.6667C18.6648 14.1601 18.1962 14.5446 17.6481 14.7716C17.0999 14.9987 16.4967 15.0581 15.9147 14.9424C15.3328 14.8266 14.7982 14.5409 14.3787 14.1213C13.9591 13.7018 13.6734 13.1672 13.5576 12.5853C13.4419 12.0033 13.5013 11.4001 13.7284 10.8519C13.9554 10.3038 14.3399 9.83524 14.8333 9.50559C15.3266 9.17595 15.9067 9 16.5 9C17.2957 9 18.0587 9.31607 18.6213 9.87868C19.1839 10.4413 19.5 11.2044 19.5 12Z" fill="#5D87FF"/>
<path d="M16.5 5.25H7.5C5.70979 5.25 3.9929 5.96116 2.72703 7.22703C1.46116 8.4929 0.75 10.2098 0.75 12C0.75 13.7902 1.46116 15.5071 2.72703 16.773C3.9929 18.0388 5.70979 18.75 7.5 18.75H16.5C18.2902 18.75 20.0071 18.0388 21.273 16.773C22.5388 15.5071 23.25 13.7902 23.25 12C23.25 10.2098 22.5388 8.4929 21.273 7.22703C20.0071 5.96116 18.2902 5.25 16.5 5.25ZM16.5 17.25H7.5C6.10761 17.25 4.77226 16.6969 3.78769 15.7123C2.80312 14.7277 2.25 13.3924 2.25 12C2.25 10.6076 2.80312 9.27226 3.78769 8.28769C4.77226 7.30312 6.10761 6.75 7.5 6.75H16.5C17.8924 6.75 19.2277 7.30312 20.2123 8.28769C21.1969 9.27226 21.75 10.6076 21.75 12C21.75 13.3924 21.1969 14.7277 20.2123 15.7123C19.2277 16.6969 17.8924 17.25 16.5 17.25ZM16.5 8.25C15.7583 8.25 15.0333 8.46993 14.4166 8.88199C13.7999 9.29404 13.3193 9.87971 13.0355 10.5649C12.7516 11.2502 12.6774 12.0042 12.8221 12.7316C12.9667 13.459 13.3239 14.1272 13.8483 14.6517C14.3728 15.1761 15.041 15.5333 15.7684 15.6779C16.4958 15.8226 17.2498 15.7484 17.9351 15.4645C18.6203 15.1807 19.206 14.7001 19.618 14.0834C20.0301 13.4667 20.25 12.7417 20.25 12C20.25 11.0054 19.8549 10.0516 19.1516 9.34835C18.4484 8.64509 17.4946 8.25 16.5 8.25ZM16.5 14.25C16.055 14.25 15.62 14.118 15.25 13.8708C14.88 13.6236 14.5916 13.2722 14.4213 12.861C14.251 12.4499 14.2064 11.9975 14.2932 11.561C14.38 11.1246 14.5943 10.7237 14.909 10.409C15.2237 10.0943 15.6246 9.88005 16.061 9.79323C16.4975 9.70642 16.9499 9.75097 17.361 9.92127C17.7722 10.0916 18.1236 10.38 18.3708 10.75C18.618 11.12 18.75 11.555 18.75 12C18.75 12.5967 18.5129 13.169 18.091 13.591C17.669 14.0129 17.0967 14.25 16.5 14.25Z" fill="#5D87FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

87
theme/packages/rtl/src/assets/images/front-pages/icon-diners.svg Normal file
View File

@@ -0,0 +1,87 @@
<svg width="94" height="24" viewBox="0 0 94 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_21817_22249)">
<path d="M18.399 24C24.9585 24.0314 30.9457 18.6504 30.9457 12.1043C30.9457 4.94571 24.9585 -0.00238009 18.399 8.58885e-07H12.7538C6.11567 -0.00238009 0.651855 4.94719 0.651855 12.1043C0.651855 18.6519 6.11567 24.0314 12.7538 24H18.399Z" fill="#0079BE"/>
<path d="M12.7807 0.992188C6.71501 0.994092 1.79977 5.91076 1.79834 11.9789C1.79977 18.046 6.71496 22.9622 12.7807 22.9641C18.8479 22.9622 23.7641 18.046 23.765 11.9789C23.7641 5.91076 18.8479 0.994092 12.7807 0.992188ZM5.81929 11.9789C5.82501 9.01366 7.67691 6.48509 10.2883 5.48028V18.476C7.67691 17.4718 5.82496 14.9446 5.81929 11.9789ZM15.2722 18.4789V5.47985C17.8845 6.48223 19.7393 9.01223 19.7441 11.9789C19.7393 14.9465 17.8845 17.4746 15.2722 18.4789Z" fill="white"/>
<path d="M34.7929 5.16267C34.7929 4.02739 34.201 4.10215 33.6333 4.08981V3.76172C34.1253 3.786 34.6295 3.786 35.1224 3.786C35.6524 3.786 36.372 3.76172 37.3062 3.76172C40.5738 3.76172 42.3533 5.94458 42.3533 8.17977C42.3533 9.42977 41.622 12.5721 37.1543 12.5721C36.511 12.5721 35.9172 12.5473 35.3243 12.5473C34.7567 12.5473 34.201 12.5598 33.6333 12.5721V12.2445C34.39 12.1683 34.7567 12.1431 34.7929 11.2845L34.7929 5.16267ZM36.0301 11.0831C36.0301 12.055 36.7248 12.1683 37.3429 12.1683C40.0696 12.1683 40.9648 10.1107 40.9648 8.22977C40.9648 5.87024 39.4501 4.16643 37.0149 4.16643C36.4968 4.16643 36.2587 4.20358 36.0301 4.21696L36.0301 11.0831Z" fill="#211E1F"/>
<path d="M42.7954 12.2474H43.0345C43.3873 12.2474 43.6402 12.2474 43.6402 11.8298V8.40981C43.6402 7.8551 43.4511 7.7779 42.984 7.52695V7.32457C43.5769 7.14648 44.2846 6.90838 44.334 6.87029C44.4231 6.81981 44.4983 6.80648 44.5616 6.80648C44.6241 6.80648 44.6502 6.88267 44.6502 6.9841V11.8298C44.6502 12.2474 44.9278 12.2474 45.2812 12.2474H45.4955V12.5755C45.0659 12.5755 44.624 12.5503 44.1707 12.5503C43.7164 12.5503 43.2617 12.5627 42.7955 12.5755V12.2474H42.7954ZM44.1454 4.8631C43.8169 4.8631 43.5274 4.56029 43.5274 4.23214C43.5274 3.91595 43.8302 3.625 44.1454 3.625C44.4726 3.625 44.764 3.89124 44.764 4.23214C44.764 4.5731 44.4855 4.8631 44.1454 4.8631Z" fill="#211E1F"/>
<path d="M46.6948 8.48326C46.6948 8.01659 46.5552 7.89088 45.9633 7.65088V7.4114C46.5057 7.23474 47.0224 7.07045 47.6285 6.80473C47.6662 6.80473 47.7033 6.83045 47.7033 6.93093V7.75183C48.4238 7.23474 49.0424 6.80469 49.889 6.80469C50.9604 6.80469 51.339 7.5875 51.339 8.57178V11.828C51.339 12.2456 51.6166 12.2456 51.9704 12.2456H52.1976V12.5737C51.7547 12.5737 51.3133 12.5485 50.86 12.5485C50.4051 12.5485 49.9503 12.5609 49.4966 12.5737V12.2456H49.7232C50.0775 12.2456 50.3285 12.2456 50.3285 11.828V8.55988C50.3285 7.8394 49.889 7.48654 49.1685 7.48654C48.7652 7.48654 48.1213 7.81469 47.7032 8.09273V11.8279C47.7032 12.2456 47.9822 12.2456 48.3361 12.2456H48.5628V12.5737C48.1213 12.5737 47.679 12.5484 47.2247 12.5484C46.7709 12.5484 46.3157 12.5609 45.8618 12.5737V12.2456H46.0894C46.4428 12.2456 46.6947 12.2456 46.6947 11.8279V8.48326H46.6948Z" fill="#211E1F"/>
<path d="M53.1571 9.08993C53.1308 9.20378 53.1308 9.39278 53.1571 9.82231C53.2314 11.0209 54.0033 12.0052 55.0113 12.0052C55.7061 12.0052 56.2499 11.6266 56.7161 11.16L56.8923 11.3371C56.3114 12.1066 55.5922 12.7628 54.558 12.7628C52.5508 12.7628 52.147 10.8185 52.147 10.0114C52.147 7.53707 53.8127 6.80469 54.6955 6.80469C55.7184 6.80469 56.817 7.44807 56.8289 8.78612C56.8289 8.86278 56.8289 8.93754 56.817 9.01421L56.7027 9.08993H53.1571ZM55.3914 8.68569C55.7061 8.68569 55.7433 8.5214 55.7433 8.37045C55.7433 7.72659 55.3523 7.20897 54.6452 7.20897C53.8761 7.20897 53.3461 7.77612 53.1946 8.68569H55.3914Z" fill="#211E1F"/>
<path d="M57.1196 12.2457H57.4606C57.8129 12.2457 58.0653 12.2457 58.0653 11.828V8.28183C58.0653 7.89088 57.5992 7.81469 57.4092 7.71373V7.52516C58.3306 7.13326 58.8358 6.80469 58.9505 6.80469C59.0253 6.80469 59.0624 6.84278 59.0624 6.96945V8.10516H59.0892C59.4039 7.61326 59.9349 6.80469 60.7039 6.80469C61.0196 6.80469 61.423 7.01897 61.423 7.47374C61.423 7.81469 61.1839 8.1185 60.8306 8.1185C60.4378 8.1185 60.4378 7.81469 59.9968 7.81469C59.7821 7.81469 59.0759 8.10516 59.0759 8.86278V11.828C59.0759 12.2456 59.3277 12.2456 59.6815 12.2456H60.3877V12.5738C59.6934 12.5609 59.1653 12.5485 58.6215 12.5485C58.1044 12.5485 57.5739 12.5609 57.1197 12.5738L57.1196 12.2457Z" fill="#211E1F"/>
<path d="M61.9782 10.8184C62.1425 11.6518 62.6468 12.359 63.5686 12.359C64.3115 12.359 64.5895 11.9047 64.5895 11.4628C64.5895 9.97326 61.8391 10.4528 61.8391 8.42088C61.8391 7.71373 62.4076 6.80469 63.7953 6.80469C64.1986 6.80469 64.7409 6.91897 65.2328 7.17183L65.3224 8.45807H65.0315C64.9057 7.66373 64.4643 7.20902 63.6557 7.20902C63.151 7.20902 62.6719 7.49954 62.6719 8.04188C62.6719 9.51997 65.5995 9.06426 65.5995 11.0457C65.5995 11.8785 64.9304 12.7628 63.4286 12.7628C62.9238 12.7628 62.3309 12.5862 61.8895 12.3343L61.7505 10.8824L61.9782 10.8184Z" fill="#211E1F"/>
<path d="M76.9961 6.04507H76.6813C76.4414 4.56888 75.3938 3.97507 73.9809 3.97507C72.5285 3.97507 70.4209 4.94646 70.4209 7.97555C70.4209 10.527 72.2394 12.3565 74.1823 12.3565C75.4313 12.3565 76.4671 11.4984 76.7194 10.1727L77.009 10.2479L76.7194 12.0907C76.1894 12.4198 74.7632 12.7603 73.9294 12.7603C70.9771 12.7603 69.1099 10.8542 69.1099 8.01412C69.1099 5.4265 71.4189 3.57031 73.8922 3.57031C74.9142 3.57031 75.8985 3.89984 76.8704 4.24079L76.9961 6.04507Z" fill="#211E1F"/>
<path d="M77.451 12.2459H77.6901C78.0439 12.2459 78.2972 12.2459 78.2972 11.8283V4.79878C78.2972 3.97783 78.1077 3.95254 77.6276 3.81397V3.61207C78.1324 3.44831 78.6624 3.22064 78.9277 3.06878C79.0653 2.99354 79.1672 2.92969 79.2043 2.92969C79.2815 2.92969 79.3067 3.00593 79.3067 3.10731V11.8283C79.3067 12.2459 79.5838 12.2459 79.9376 12.2459H80.1505V12.574C79.7234 12.574 79.2815 12.5488 78.8267 12.5488C78.3729 12.5488 77.9186 12.5612 77.4509 12.574V12.2459H77.451Z" fill="#211E1F"/>
<path d="M85.5538 11.8761C85.5538 12.1042 85.6919 12.1166 85.9061 12.1166C86.058 12.1166 86.2466 12.1042 86.4113 12.1042V12.3699C85.8681 12.4199 84.8333 12.6852 84.5932 12.7604L84.5299 12.7223V11.7009C83.7738 12.3189 83.1923 12.7604 82.2956 12.7604C81.6142 12.7604 80.9076 12.3189 80.9076 11.2594V8.02704C80.9076 7.69895 80.8576 7.38319 80.1519 7.32038V7.08038C80.6067 7.068 81.6143 6.99223 81.779 6.99223C81.919 6.99223 81.919 7.08038 81.919 7.358V10.6137C81.919 10.9932 81.919 12.0784 83.0161 12.0784C83.4452 12.0784 84.0128 11.7503 84.5424 11.3099V7.91271C84.5424 7.66128 83.9371 7.52271 83.4838 7.396V7.16885C84.6181 7.09266 85.3261 6.99219 85.4514 6.99219C85.5537 6.99219 85.5537 7.08028 85.5537 7.21981L85.5538 11.8761Z" fill="#211E1F"/>
<path d="M88.0652 7.71402C88.5695 7.28493 89.2508 6.80497 89.9456 6.80497C91.4098 6.80497 92.2923 8.08116 92.2923 9.45588C92.2923 11.1093 91.0813 12.763 89.2755 12.763C88.3422 12.763 87.8503 12.4597 87.5217 12.3215L87.1437 12.6111L86.8794 12.473C86.9913 11.7283 87.0556 10.9959 87.0556 10.2264V4.79874C87.0556 3.97783 86.8651 3.95254 86.386 3.81397V3.61207C86.8922 3.44831 87.4207 3.22064 87.686 3.06874C87.8251 2.9935 87.9255 2.92969 87.9646 2.92969C88.0398 2.92969 88.065 3.00593 88.065 3.10731V7.71397H88.0652V7.71402ZM88.0652 11.1469C88.0652 11.6269 88.5189 12.4355 89.3647 12.4355C90.7151 12.4355 91.2827 11.1093 91.2827 9.9855C91.2827 8.62264 90.2489 7.48693 89.2642 7.48693C88.7961 7.48693 88.4056 7.79026 88.0651 8.08116L88.0652 11.1469Z" fill="#211E1F"/>
<path d="M33.6184 19.9114H33.7151C33.9617 19.9114 34.2227 19.8781 34.2227 19.5204V15.9223C34.2227 15.5642 33.9617 15.5304 33.7151 15.5304H33.6184V15.3242C33.8865 15.3242 34.2984 15.3514 34.636 15.3514C34.9789 15.3514 35.3903 15.3242 35.7132 15.3242V15.5304H35.6165C35.3703 15.5304 35.1089 15.5642 35.1089 15.9223V19.5204C35.1089 19.8781 35.3703 19.9114 35.6165 19.9114H35.7132V20.1186C35.3836 20.1186 34.9708 20.0914 34.6284 20.0914C34.2918 20.0914 33.8865 20.1186 33.6184 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M35.7134 20.1468C35.3814 20.1468 34.9701 20.1192 34.6281 20.1192C34.2924 20.1192 33.8886 20.1468 33.6186 20.1468H33.5891V20.1173V19.9111V19.8811H33.6186H33.7148C33.9638 19.8754 34.1905 19.8554 34.1929 19.5197V15.9215C34.1905 15.5858 33.9639 15.5634 33.7148 15.5587H33.5891V15.5297V15.293H33.6186C33.8886 15.293 34.3001 15.3201 34.6357 15.3201C34.9776 15.3201 35.3886 15.293 35.7134 15.293H35.7439V15.3244V15.5587H35.7134H35.6172C35.3681 15.5634 35.14 15.5858 35.1386 15.9215V19.5197C35.14 19.8554 35.3681 19.8754 35.6172 19.8811H35.7438V19.9111V20.1468H35.7134ZM35.6838 20.0882V19.9415H35.6172C35.372 19.9415 35.0801 19.8992 35.0786 19.5197V15.9215C35.08 15.542 35.3719 15.4992 35.6172 15.4992H35.6838V15.3534C35.3667 15.3534 34.9691 15.3801 34.6357 15.3801C34.3095 15.3801 33.9148 15.3554 33.6491 15.3534V15.4992H33.7148C33.9595 15.4992 34.2524 15.542 34.2524 15.9215V19.5197C34.2524 19.8992 33.9595 19.9415 33.7148 19.9415H33.6491V20.0882C33.9148 20.0854 34.3028 20.0606 34.6281 20.0606C34.9624 20.0606 35.36 20.0863 35.6838 20.0882Z" fill="#211E1F"/>
<path d="M40.4313 18.7647L40.4451 18.7514V16.1762C40.4451 15.6124 40.0532 15.5305 39.8475 15.5305H39.696V15.3242C40.0194 15.3242 40.3351 15.3514 40.6575 15.3514C40.9388 15.3514 41.2217 15.3242 41.5027 15.3242V15.5305H41.3998C41.1108 15.5305 40.7879 15.5852 40.7879 16.4024V19.5281C40.7879 19.7681 40.795 20.0081 40.8288 20.221H40.5675L37.0317 16.2786V19.1086C37.0317 19.7062 37.1475 19.9115 37.677 19.9115H37.7931V20.1186C37.4984 20.1186 37.2036 20.0915 36.9079 20.0915C36.5998 20.0915 36.2836 20.1186 35.9741 20.1186V19.9115H36.0703C36.5441 19.9115 36.688 19.5895 36.688 19.0405V16.1476C36.688 15.7634 36.3713 15.5305 36.0637 15.5305H35.9742V15.3243C36.2351 15.3243 36.5027 15.3514 36.7632 15.3514C36.9694 15.3514 37.1689 15.3243 37.3746 15.3243L40.4313 18.7647Z" fill="#211E1F"/>
<path d="M40.8284 20.2531L40.5452 20.2425L37.0604 16.3583V19.1107C37.0684 19.7078 37.1594 19.8774 37.6765 19.884H37.8237V19.9135V20.1497H37.7932C37.4961 20.1497 37.2004 20.1221 36.9074 20.1221C36.5998 20.1221 36.2846 20.1497 35.9732 20.1497H35.9432V20.1202V19.884H35.9732H36.0698C36.5236 19.8816 36.6532 19.5902 36.6584 19.0426V16.1502C36.6574 15.7845 36.3574 15.5626 36.0632 15.5616H35.9431V15.5312V15.2969H35.9731C36.2355 15.2969 36.5045 15.3231 36.7622 15.3231C36.9664 15.3231 37.1655 15.2969 37.3969 15.3069L40.415 18.7045V16.1788C40.4112 15.6322 40.047 15.5664 39.8469 15.5616H39.665V15.5312V15.2969H39.6955C40.0198 15.2969 40.336 15.3231 40.6569 15.3231C40.9364 15.3231 41.2179 15.2969 41.5017 15.2969H41.5317V15.3264V15.5616H41.5017H41.3993C41.116 15.5697 40.825 15.5944 40.817 16.4044V19.5297C40.817 19.7697 40.8241 20.0097 40.8574 20.2178L40.8641 20.253H40.8284V20.2531ZM40.5675 20.1925H40.7947C40.7638 19.9864 40.7585 19.7578 40.7585 19.5297V16.4044C40.7585 15.5802 41.1037 15.5021 41.3994 15.5021H41.4718V15.3564C41.2014 15.3583 40.9299 15.383 40.6571 15.383C40.3428 15.383 40.0371 15.3583 39.7262 15.3564L39.7257 15.5021H39.8471C40.0581 15.5021 40.4747 15.5964 40.4747 16.1788L40.4652 18.774L40.4514 18.7883L40.4281 18.8097L37.3743 15.3564C37.1705 15.3564 36.9714 15.383 36.7624 15.383C36.5104 15.383 36.2528 15.3583 36.0038 15.3564L36.0024 15.5021H36.0633C36.3857 15.5021 36.7166 15.7483 36.7166 16.1502V19.0425C36.7166 19.5915 36.5638 19.943 36.07 19.9449L36.0038 19.943V20.0911C36.3014 20.0882 36.6071 20.0634 36.9075 20.0634C37.1943 20.0634 37.4795 20.0883 37.7633 20.0911V19.9449H37.6766C37.1361 19.943 37.0019 19.7078 37.0014 19.1106V16.2034L40.5675 20.1925ZM40.4151 18.7531V18.7507L40.4094 18.7459L40.4151 18.7531Z" fill="#211E1F"/>
<path d="M42.5303 15.6694C42.0146 15.6694 41.9951 15.7933 41.8922 16.2942H41.686C41.7132 16.1023 41.7475 15.9104 41.7684 15.7104C41.796 15.518 41.8093 15.3265 41.8093 15.1275H41.9746C42.0298 15.3337 42.2013 15.3266 42.3875 15.3266H45.9298C46.1155 15.3266 46.287 15.3199 46.3013 15.1133L46.465 15.1409C46.4384 15.3266 46.4107 15.5119 46.3898 15.6975C46.3774 15.8828 46.3774 16.0685 46.3774 16.2532L46.1708 16.3299C46.1565 16.0761 46.1222 15.6694 45.6627 15.6694H44.5365V19.3237C44.5365 19.8532 44.777 19.9138 45.1055 19.9138H45.2365V20.1209C44.9688 20.1209 44.4875 20.0938 44.1174 20.0938C43.7056 20.0938 43.2241 20.1209 42.956 20.1209V19.9138H43.0869C43.4655 19.9138 43.6569 19.8799 43.6569 19.338V15.6694H42.5303Z" fill="#211E1F"/>
<path d="M45.2376 20.1496C44.9671 20.1496 44.4866 20.122 44.1176 20.122C43.7061 20.122 43.2257 20.1496 42.9561 20.1496H42.9276V20.1206V19.8839H42.9561H43.0871C43.4657 19.8749 43.618 19.8701 43.6266 19.3377V15.6992H42.5304V15.6691V15.6386H43.6862V19.3377C43.6862 19.8886 43.4643 19.9444 43.0871 19.9448H42.9862V20.0896C43.2571 20.0882 43.719 20.0634 44.1176 20.0634C44.4758 20.0634 44.9348 20.0882 45.2062 20.0896V19.9448H45.1057C44.7738 19.9444 44.5067 19.8629 44.5067 19.3234V15.6386H45.6629C46.1238 15.6406 46.1838 16.0325 46.199 16.2872L46.3471 16.2325C46.3471 16.0534 46.3481 15.8739 46.3605 15.6929C46.3805 15.5163 46.4057 15.341 46.4314 15.1658L46.3266 15.1482C46.2948 15.3482 46.1019 15.3582 45.929 15.3563H42.3876H42.3519C42.1904 15.3563 42.0138 15.3486 41.9523 15.1568H41.839C41.838 15.3468 41.8247 15.5311 41.7985 15.7139C41.7785 15.9025 41.747 16.0839 41.7213 16.2654H41.8685C41.959 15.7867 42.018 15.6315 42.5304 15.6387V15.6692V15.6992C42.0228 15.7082 42.0333 15.7939 41.9213 16.3016L41.9161 16.3249H41.8923H41.6519L41.6557 16.2892C41.6833 16.0968 41.7181 15.9053 41.7385 15.7053C41.7671 15.5148 41.7804 15.3244 41.7804 15.1272V15.0972H41.8095H41.998L42.0028 15.1186C42.05 15.292 42.1771 15.2929 42.3519 15.2958H42.3876H45.929C46.1205 15.2929 46.2595 15.2901 46.2714 15.1105L46.2742 15.0781L46.3052 15.0848L46.499 15.1153L46.4947 15.1453C46.467 15.3291 46.44 15.5148 46.42 15.6991C46.4061 15.882 46.4061 16.0677 46.4061 16.2529V16.2744L46.3871 16.282L46.1438 16.3705L46.1419 16.3305C46.1238 16.0724 46.0966 15.6991 45.6628 15.6991H44.5666V19.3234C44.5728 19.8415 44.7785 19.8772 45.1056 19.8838H45.2666V19.9134V20.1496L45.2376 20.1496Z" fill="#211E1F"/>
<path d="M46.6851 19.9114H46.7817C47.0284 19.9114 47.2898 19.8781 47.2898 19.5204V15.9223C47.2898 15.5642 47.0284 15.5304 46.7817 15.5304H46.6851V15.3242C47.1032 15.3242 47.8184 15.3514 48.3941 15.3514C48.9722 15.3514 49.6851 15.3242 50.1517 15.3242C50.1403 15.619 50.1465 16.0733 50.1669 16.3747L49.9598 16.4299C49.927 15.9838 49.8445 15.6271 49.1231 15.6271H48.1693V17.4257H48.9856C49.3974 17.4257 49.4874 17.1928 49.5279 16.821H49.7336C49.7203 17.09 49.7132 17.3576 49.7132 17.6253C49.7132 17.8867 49.7203 18.1472 49.7336 18.4081L49.5279 18.449C49.4874 18.0372 49.4665 17.7695 48.9922 17.7695H48.1694V19.369C48.1694 19.8162 48.5661 19.8162 49.0061 19.8162C49.8303 19.8162 50.1936 19.7605 50.3999 18.9786L50.5923 19.0257C50.5023 19.3905 50.4203 19.7538 50.3594 20.1186C49.9194 20.1186 49.1294 20.0914 48.5122 20.0914C47.8932 20.0914 47.0766 20.1186 46.6851 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M50.3583 20.1497C49.9174 20.1497 49.1279 20.1216 48.5112 20.1216C47.8927 20.1216 47.0764 20.1497 46.6845 20.1497H46.6555V20.1207V19.9135V19.884H46.6845H46.7808C47.0298 19.8802 47.2555 19.8583 47.2589 19.5226V15.9244C47.2555 15.5892 47.0298 15.5668 46.7808 15.5616H46.6555V15.5326V15.2969H46.6845C47.1036 15.2969 47.8179 15.3231 48.3936 15.3231C48.9711 15.3231 49.6836 15.2969 50.1512 15.2969H50.1821L50.1807 15.3274C50.1759 15.4307 50.174 15.5525 50.174 15.6821C50.174 15.9197 50.1807 16.1792 50.1945 16.375L50.1955 16.3997L50.1726 16.4064L49.9312 16.4693L49.9298 16.4341C49.8893 15.9884 49.8298 15.665 49.1227 15.6584H48.1975L48.1965 17.3969H48.9851C49.3804 17.3931 49.4512 17.1907 49.4979 16.8207L49.5004 16.7936H49.527H49.7637L49.7632 16.8245C49.7499 17.0921 49.7413 17.3597 49.7413 17.6274C49.7413 17.8874 49.7499 18.1478 49.7632 18.4093L49.7637 18.4336L49.7389 18.4393L49.5004 18.4869L49.4979 18.4545C49.4508 18.0354 49.4474 17.8059 48.9912 17.8007L48.1974 17.8002V19.3712C48.198 19.7883 48.5579 19.7859 49.0056 19.7883C49.8322 19.7835 50.1637 19.7436 50.3708 18.9721L50.3775 18.9445L50.4065 18.9497L50.6266 19.0064L50.6198 19.035C50.5313 19.3988 50.4489 19.7616 50.3874 20.1254L50.3818 20.1497H50.3583ZM50.3331 20.0897C50.3927 19.7435 50.4711 19.3959 50.5555 19.0502L50.4198 19.0159C50.2141 19.7845 49.8159 19.853 49.0055 19.8478C48.5731 19.8478 48.1398 19.8478 48.1378 19.3711V17.7416H48.9912C49.4707 17.7364 49.5198 18.0259 49.5536 18.4168L49.7022 18.3859C49.6888 18.133 49.6827 17.8792 49.6827 17.6273C49.6827 17.3687 49.6888 17.1116 49.7022 16.853H49.5536C49.5155 17.2106 49.4036 17.4621 48.985 17.4573H48.1379V15.5983H49.1227C49.837 15.5934 49.9555 15.9621 49.986 16.394L50.1341 16.354C50.1222 16.1602 50.114 15.9116 50.114 15.6821C50.114 15.5644 50.1169 15.4535 50.1208 15.3564C49.6541 15.3583 48.9589 15.383 48.3936 15.383C47.8293 15.383 47.1346 15.3583 46.7141 15.3564V15.5021H46.7807C47.0255 15.5021 47.3179 15.5449 47.3188 15.9244V19.5226C47.3179 19.9012 47.0255 19.9431 46.7807 19.945H46.7141V20.0897C47.1146 20.0892 47.9079 20.0635 48.5112 20.0635C49.1169 20.0635 49.8902 20.0892 50.3331 20.0897Z" fill="#211E1F"/>
<path d="M51.5182 16.0523C51.5182 15.5514 51.2439 15.5309 51.0301 15.5309H50.9067V15.3242C51.1267 15.3242 51.5519 15.3518 51.971 15.3518C52.3829 15.3518 52.7129 15.3242 53.0763 15.3242C53.941 15.3242 54.7111 15.558 54.7111 16.5342C54.7111 17.1509 54.2992 17.529 53.7567 17.7428L54.9305 19.4999C55.1229 19.7904 55.2596 19.8718 55.5967 19.9118V20.119C55.3701 20.119 55.15 20.0918 54.9238 20.0918C54.711 20.0918 54.4905 20.119 54.2785 20.119C53.75 19.4252 53.2957 18.6833 52.8495 17.8928H52.3977V19.3633C52.3977 19.8928 52.6439 19.9118 52.9595 19.9118H53.0834V20.119C52.691 20.119 52.2944 20.0919 51.9024 20.0919C51.5724 20.0919 51.2495 20.119 50.9067 20.119V19.9118H51.0301C51.2853 19.9118 51.5182 19.7966 51.5182 19.5418V16.0523ZM52.3976 17.6456H52.7329C53.42 17.6456 53.79 17.3847 53.79 16.5742C53.79 15.9637 53.3991 15.5718 52.7872 15.5718C52.581 15.5718 52.4934 15.5933 52.3975 15.5995V17.6456H52.3976Z" fill="#211E1F"/>
<path d="M55.5975 20.1467C55.3675 20.1467 55.149 20.1191 54.9233 20.1191C54.7137 20.1191 54.4947 20.1467 54.2552 20.1353C53.7285 19.4443 53.2771 18.7067 52.8333 17.9219H52.4275V19.361C52.4347 19.8777 52.6423 19.8734 52.9599 19.881H53.1137V19.9105V20.1467H53.0832C52.6908 20.1467 52.2923 20.1191 51.9023 20.1191C51.5742 20.1191 51.2523 20.1467 50.9075 20.1467H50.8774V20.1172V19.881H50.9075H51.0308C51.2784 19.8796 51.487 19.772 51.488 19.5405V16.0511C51.4828 15.5634 51.2442 15.5663 51.0308 15.5592H50.8774V15.5296V15.293H50.9075C51.1299 15.293 51.5537 15.3201 51.9718 15.3201C52.3817 15.3201 52.7118 15.293 53.0775 15.293C53.9428 15.2949 54.7399 15.5339 54.7423 16.5311C54.7423 17.1515 54.3323 17.5386 53.8023 17.7549L54.9561 19.4824C55.148 19.7672 55.2675 19.8382 55.6018 19.881L55.627 19.8848V19.9105V20.1467H55.5975V20.1467ZM52.3976 17.8619H52.8671L52.8752 17.8771C53.3228 18.6662 53.7737 19.4071 54.2794 20.0881C54.489 20.0881 54.7094 20.06 54.9233 20.06C55.1427 20.06 55.3542 20.0838 55.568 20.0871V19.9366C55.2456 19.8966 55.0947 19.8004 54.9071 19.5152L53.7123 17.7271L53.7461 17.7133C54.2832 17.5019 54.6809 17.1347 54.6813 16.5309C54.6809 15.578 53.9408 15.3571 53.0775 15.3533C52.7151 15.3533 52.3856 15.3804 51.9718 15.3804C51.5685 15.3804 51.1613 15.3552 50.9365 15.3533V15.499H51.0308C51.2442 15.4995 51.5479 15.5347 51.5479 16.051V19.5404C51.5479 19.8162 51.2893 19.9419 51.0308 19.9423H50.9365V20.0871C51.2671 20.0861 51.5799 20.06 51.9023 20.06C52.2865 20.06 52.6737 20.0862 53.0537 20.0871V19.9423H52.9599C52.6465 19.9418 52.3675 19.9028 52.3675 19.3609V17.8619H52.3975H52.3976ZM52.3976 17.6733H52.3675V15.5704L52.3937 15.5681C52.4875 15.561 52.5804 15.5414 52.788 15.5414C53.4138 15.5414 53.8204 15.9481 53.8213 16.5742C53.8194 17.3942 53.4261 17.6728 52.7337 17.6733H52.3976V17.6733ZM52.7337 17.6143C53.4136 17.6085 53.7556 17.3724 53.7628 16.5743C53.759 15.9743 53.3861 15.6019 52.788 15.5995C52.6022 15.5995 52.5151 15.6166 52.4275 15.6243V17.6143H52.7337Z" fill="#211E1F"/>
<path d="M60.2598 18.7647L60.2722 18.7514V16.1762C60.2722 15.6124 59.8813 15.5305 59.6756 15.5305H59.5251V15.3242C59.8475 15.3242 60.1628 15.3514 60.4861 15.3514C60.768 15.3514 61.0485 15.3242 61.3318 15.3242V15.5305H61.2285C60.9399 15.5305 60.617 15.5852 60.617 16.4024V19.5281C60.617 19.7681 60.6237 20.0081 60.6575 20.221H60.3971L56.8609 16.2786V19.1086C56.8609 19.7062 56.9775 19.9115 57.5061 19.9115H57.6228V20.1186C57.328 20.1186 57.0323 20.0915 56.7376 20.0915C56.4275 20.0915 56.1118 20.1186 55.8032 20.1186V19.9115H55.8985C56.3728 19.9115 56.517 19.5895 56.517 19.0405V16.1476C56.517 15.7634 56.2013 15.5305 55.8928 15.5305H55.8032V15.3243C56.0633 15.3243 56.3323 15.3514 56.5928 15.3514C56.7976 15.3514 56.9975 15.3243 57.2037 15.3243L60.2598 18.7647Z" fill="#211E1F"/>
<path d="M60.6574 20.2496L60.3746 20.2401L56.8894 16.3553V19.1073C56.8975 19.7049 56.988 19.8743 57.506 19.8811H57.6513V19.9106V20.1468H57.6213C57.3242 20.1468 57.0298 20.1186 56.7355 20.1186C56.4289 20.1186 56.1117 20.1468 55.8027 20.1468H55.7717V20.1177V19.8811H55.8027H55.8979C56.3512 19.8792 56.4813 19.5873 56.4855 19.0377V16.1468C56.4851 15.781 56.1856 15.5592 55.8923 15.5586H55.7717V15.5296V15.293H55.8027C56.0646 15.293 56.3332 15.3201 56.5922 15.3201C56.7941 15.3201 56.9932 15.293 57.2236 15.3024L60.2423 18.7015V16.1748C60.2403 15.6291 59.8746 15.5615 59.6751 15.5587H59.4936V15.5296V15.293H59.5237C59.8484 15.293 60.1646 15.3201 60.4855 15.3201C60.7656 15.3201 61.047 15.293 61.3298 15.293H61.3598V15.3239V15.5587H61.3298H61.2279C60.9446 15.5663 60.6526 15.5915 60.6455 16.4015V19.5267C60.6455 19.7667 60.6517 20.0048 60.6865 20.2163L60.6903 20.2496H60.6574ZM60.3965 20.1896H60.6222C60.5922 19.9834 60.5855 19.7548 60.5855 19.5267V16.4015C60.586 15.5772 60.9336 15.501 61.2279 15.4986H61.2998V15.3534C61.0303 15.3553 60.7584 15.3801 60.4855 15.3801C60.1703 15.3801 59.864 15.3553 59.5531 15.3534V15.4986H59.6751C59.8864 15.501 60.3027 15.5934 60.3027 16.1748L60.2932 18.771L60.2798 18.7853L60.2589 18.8072L57.2027 15.3534C56.9989 15.3534 56.7998 15.3801 56.5923 15.3801C56.338 15.3801 56.0813 15.3553 55.8313 15.3534V15.4987H55.8922C56.2146 15.5011 56.5456 15.7444 56.5456 16.1468V19.0377C56.5456 19.5891 56.3903 19.9401 55.898 19.942L55.8313 19.9415V20.0867C56.128 20.0853 56.4342 20.0605 56.7356 20.0605C57.0237 20.0605 57.309 20.0853 57.5927 20.0867V19.942H57.5061C56.9652 19.9415 56.8299 19.7049 56.829 19.1072V16.2015L60.3965 20.1896ZM60.2422 18.7505V18.7481L60.2369 18.7429L60.2422 18.7505Z" fill="#211E1F"/>
<path d="M62.436 19.1366C62.3665 19.3695 62.2836 19.5495 62.2836 19.6719C62.2836 19.8785 62.5727 19.9119 62.7984 19.9119H62.8751V20.119C62.5999 20.1042 62.3193 20.0919 62.0427 20.0919C61.7956 20.0919 61.5498 20.1043 61.3022 20.119V19.9119H61.3436C61.6112 19.9119 61.8384 19.7542 61.9398 19.4652L63.0398 16.3137C63.1284 16.0594 63.2532 15.7161 63.2947 15.4614C63.5132 15.3866 63.7884 15.2495 63.9185 15.1666C63.9399 15.1595 63.9518 15.1523 63.9732 15.1523C63.9937 15.1523 64.007 15.1523 64.0222 15.1738C64.0422 15.2281 64.0622 15.2904 64.0842 15.3452L65.3475 18.9376C65.4299 19.1776 65.5112 19.4314 65.6004 19.6381C65.6832 19.8304 65.828 19.9119 66.0551 19.9119H66.0956V20.119C65.7866 20.1042 65.4771 20.0919 65.1485 20.0919C64.8118 20.0919 64.4675 20.1043 64.1175 20.119V19.9119H64.1937C64.3509 19.9119 64.6195 19.8852 64.6195 19.7133C64.6195 19.6242 64.5575 19.439 64.4809 19.2185L64.2137 18.4219H62.6552L62.436 19.1366ZM63.4379 16.0938H63.4241L62.7855 18.0376H64.0689L63.4379 16.0938Z" fill="#211E1F"/>
<path d="M66.0934 20.1468C65.7843 20.133 65.4753 20.1187 65.1481 20.1187C64.8115 20.1187 64.4695 20.133 64.1181 20.1468L64.0871 20.1487V20.1177V19.8801H64.1172H64.1929C64.3519 19.8801 64.5881 19.8439 64.5881 19.7121C64.59 19.6339 64.5281 19.4454 64.4524 19.2268L64.1909 18.4502H62.6762L62.4629 19.1439C62.3933 19.3782 62.311 19.5597 62.3115 19.6716C62.3138 19.8392 62.5705 19.8801 62.7981 19.8801H62.9038V19.9111V20.1487L62.8729 20.1468C62.5981 20.133 62.3176 20.1187 62.0438 20.1187C61.7976 20.1187 61.5501 20.133 61.3039 20.1468L61.272 20.1487V20.1177V19.8801H61.3019H61.3429C61.5986 19.8792 61.812 19.734 61.911 19.4545L63.0105 16.3026C63.1006 16.0478 63.2244 15.7054 63.2839 15.4316C63.4991 15.3587 63.7748 15.2207 63.9072 15.1368C63.9263 15.1307 63.9454 15.1211 63.9735 15.1211C63.9901 15.1207 64.0272 15.1249 64.0492 15.1612C64.0687 15.2178 64.0901 15.2788 64.111 15.3345L65.3758 18.9265C65.4568 19.1674 65.5387 19.4212 65.6283 19.624C65.7078 19.8074 65.834 19.8793 66.0549 19.8802H66.1249V19.9112V20.1488L66.0934 20.1468ZM64.1471 20.0854C64.4872 20.0735 64.82 20.0601 65.1481 20.0601C65.4671 20.0601 65.7657 20.0735 66.0642 20.0854V19.942H66.0547C65.8195 19.9434 65.6571 19.8511 65.5728 19.6487C65.4833 19.4401 65.3995 19.1854 65.3191 18.9449L64.0547 15.3535C64.0338 15.2987 64.0138 15.2363 63.9957 15.1877C63.99 15.1811 63.9914 15.1811 63.9857 15.1811H63.9733C63.959 15.1811 63.9509 15.1854 63.9333 15.1901C63.8009 15.2763 63.5253 15.4111 63.3218 15.4649C63.2795 15.7249 63.1562 16.0677 63.0666 16.322L61.9676 19.4744C61.8629 19.7725 61.6224 19.9425 61.3429 19.942H61.3319V20.0854C61.5671 20.0735 61.8052 20.0601 62.0438 20.0601C62.309 20.0601 62.5805 20.0735 62.8424 20.0854V19.942H62.7981C62.5748 19.9391 62.2624 19.9139 62.2538 19.6715C62.2543 19.5344 62.3386 19.3587 62.4056 19.1268L62.4357 19.1358L62.4056 19.1258L62.6318 18.3915H64.2328L64.5085 19.2077C64.5857 19.4282 64.648 19.6111 64.648 19.712C64.6385 19.923 64.3485 19.9377 64.1928 19.942H64.1471L64.1471 20.0854ZM62.7434 18.0658L63.4009 16.0625H63.4238H63.4381H63.4586L64.1105 18.0658H62.7434ZM62.8257 18.0063H64.0276L63.4299 16.1658L62.8257 18.0063Z" fill="#211E1F"/>
<path d="M66.3976 15.6655C65.8823 15.6655 65.8619 15.7894 65.7584 16.2903H65.5522C65.5794 16.0984 65.6142 15.9065 65.6357 15.7065C65.6632 15.5141 65.6757 15.3226 65.6757 15.1236H65.8413C65.8961 15.3298 66.0685 15.3227 66.2528 15.3227H69.7971C69.9814 15.3227 70.1529 15.316 70.1671 15.1094L70.3314 15.137C70.3051 15.3227 70.2781 15.5079 70.2571 15.6936C70.2423 15.8789 70.2423 16.0646 70.2423 16.2493L70.0366 16.326C70.0237 16.0722 69.9895 15.6655 69.529 15.6655H68.4028V19.3198C68.4028 19.8493 68.6438 19.9099 68.9724 19.9099H69.1028V20.117C68.8352 20.117 68.3552 20.0899 67.9837 20.0899C67.5723 20.0899 67.0909 20.117 66.8233 20.117V19.9099H66.9533C67.3318 19.9099 67.5242 19.876 67.5242 19.3341V15.6655H66.3976Z" fill="#211E1F"/>
<path d="M69.1025 20.1496C68.8329 20.1496 68.352 20.122 67.9834 20.122C67.5729 20.122 67.0919 20.1496 66.8229 20.1496H66.7925V20.1206V19.8839H66.8229H66.9529C67.3314 19.8748 67.4834 19.8701 67.4929 19.3376L67.4919 15.6991H66.3972V15.6691V15.6386H67.5524V19.3376C67.5524 19.8886 67.33 19.9429 66.9529 19.9443H66.852V20.091C67.1238 20.0881 67.5848 20.0634 67.9834 20.0634C68.3419 20.0634 68.801 20.0882 69.0724 20.091V19.9443H68.971C68.6409 19.9429 68.3734 19.8634 68.3725 19.3234V15.6386H69.5286C69.9896 15.6405 70.05 16.0324 70.0629 16.2872L70.2129 16.2324C70.2129 16.0534 70.2134 15.8738 70.2267 15.6938C70.2458 15.5172 70.2714 15.341 70.2968 15.1657L70.1929 15.1481C70.1615 15.3481 69.9677 15.3591 69.7968 15.3562H66.2524H66.2177C66.0558 15.3581 65.8805 15.3486 65.8181 15.1557H65.7058C65.7038 15.3462 65.6909 15.531 65.6638 15.7138C65.6458 15.9029 65.6119 16.0848 65.5862 16.2653H65.7334C65.8243 15.7866 65.8839 15.6314 66.3972 15.6386V15.6691L66.3971 15.6991C65.8881 15.7077 65.8996 15.7938 65.7871 16.3015L65.7819 16.3248H65.7581H65.5171L65.5214 16.2905C65.5499 16.0967 65.5842 15.9052 65.6042 15.7066C65.6323 15.5147 65.6457 15.3243 65.6457 15.1271V15.0971H65.6752H65.8628L65.8685 15.1186C65.9166 15.2919 66.0418 15.2928 66.2176 15.2957L66.2523 15.2966H69.7967C69.9862 15.2929 70.1247 15.29 70.1366 15.111L70.1386 15.0781L70.1709 15.0848L70.3657 15.1153L70.3605 15.1453C70.3324 15.3291 70.3062 15.5148 70.2853 15.6991C70.2714 15.882 70.2714 16.0682 70.2714 16.2529V16.2744L70.252 16.282L70.0086 16.3706L70.0072 16.3305C69.9896 16.0725 69.9624 15.6991 69.5286 15.6991H68.432V19.3234C68.4391 19.8415 68.6443 19.8772 68.971 19.8838H69.1319V19.9134V20.1496L69.1025 20.1496Z" fill="#211E1F"/>
<path d="M70.5847 19.9114H70.681C70.929 19.9114 71.1885 19.8781 71.1885 19.5204V15.9223C71.1885 15.5642 70.929 15.5304 70.681 15.5304H70.5847V15.3242C70.8529 15.3242 71.2643 15.3514 71.6 15.3514C71.9447 15.3514 72.3567 15.3242 72.6795 15.3242V15.5304H72.5833C72.3362 15.5304 72.0743 15.5642 72.0743 15.9223V19.5204C72.0743 19.8781 72.3362 19.9114 72.5833 19.9114H72.6795V20.1186C72.3495 20.1186 71.9371 20.0914 71.5948 20.0914C71.2576 20.0914 70.8529 20.1186 70.5847 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M72.6799 20.1497C72.348 20.1497 71.937 20.1216 71.5947 20.1216C71.2589 20.1216 70.8533 20.1497 70.5851 20.1497H70.5552V20.1207V19.9135V19.884H70.5851H70.6814C70.9294 19.8802 71.1571 19.8588 71.158 19.5226V15.9244C71.1571 15.5892 70.9294 15.5663 70.6814 15.5616H70.5552V15.5326V15.2969H70.5851C70.8533 15.2969 71.2657 15.3231 71.6004 15.3231C71.9428 15.3231 72.3547 15.2969 72.6799 15.2969H72.709V15.3264V15.5616H72.6799H72.5837C72.3327 15.5664 72.1075 15.5892 72.1042 15.9244V19.5226C72.1075 19.8588 72.3328 19.8802 72.5837 19.884H72.709V19.9135V20.1497H72.6799ZM72.649 20.0897V19.9444H72.5837C72.3375 19.9444 72.0461 19.9012 72.0461 19.5226V15.9244C72.0461 15.5449 72.3375 15.5021 72.5837 15.5021H72.649V15.3564C72.3318 15.3583 71.9352 15.383 71.6004 15.383C71.2751 15.383 70.8813 15.3583 70.6152 15.3564V15.5021H70.6814C70.9257 15.5021 71.2181 15.5449 71.219 15.9244V19.5226C71.218 19.9011 70.9257 19.9444 70.6814 19.9444H70.6152V20.0897C70.88 20.0868 71.2686 20.0635 71.5947 20.0635C71.9276 20.0635 72.3252 20.0883 72.649 20.0897Z" fill="#211E1F"/>
<path d="M75.4181 15.2227C76.8819 15.2227 78.0485 16.1303 78.0485 17.5927C78.0485 19.1727 76.9156 20.2227 75.4538 20.2227C73.9966 20.2227 72.8853 19.2336 72.8853 17.7569C72.8853 16.3288 73.99 15.2227 75.4181 15.2227ZM75.5219 19.9203C76.8542 19.9203 77.0862 18.745 77.0862 17.7436C77.0862 16.7398 76.5452 15.5246 75.4048 15.5246C74.2029 15.5246 73.8462 16.596 73.8462 17.5155C73.8462 18.745 74.4091 19.9203 75.5219 19.9203Z" fill="#211E1F"/>
<path d="M72.854 17.7557C72.8569 16.3109 73.975 15.1933 75.4173 15.1914V15.2214V15.2504C74.006 15.2504 72.9135 16.3424 72.9122 17.7556C72.9155 19.2156 74.0112 20.1899 75.4531 20.1904C76.9007 20.1899 78.0174 19.1547 78.0197 17.59C78.0183 16.1462 76.8692 15.2523 75.4174 15.2504V15.2214V15.1914C76.8926 15.1924 78.075 16.109 78.0779 17.59C78.0765 19.1866 76.9288 20.2476 75.4531 20.2504C73.9845 20.2475 72.8569 19.2485 72.8541 17.7556H72.854V17.7557ZM73.816 17.5143C73.8179 16.5905 74.1788 15.4924 75.4045 15.4924C76.5702 15.4953 77.1145 16.7334 77.1164 17.7424C77.1145 18.7438 76.8789 19.9476 75.5217 19.9476V19.9191V19.8895C76.8274 19.8876 77.0536 18.7438 77.0569 17.7424C77.0569 16.7467 76.5207 15.5548 75.4045 15.5533C74.2264 15.5547 73.8778 16.5995 73.8755 17.5143C73.8765 18.7376 74.4341 19.8866 75.5217 19.8895V19.9191V19.9476C74.3817 19.9462 73.8179 18.751 73.816 17.5143Z" fill="#211E1F"/>
<path d="M82.6764 18.7647L82.6902 18.7514V16.1762C82.6902 15.6124 82.2979 15.5305 82.0917 15.5305H81.9431V15.3242C82.265 15.3242 82.5807 15.3514 82.9026 15.3514C83.185 15.3514 83.4664 15.3242 83.7483 15.3242V15.5305H83.6445C83.3568 15.5305 83.0335 15.5852 83.0335 16.4024V19.5281C83.0335 19.7681 83.0402 20.0081 83.075 20.221H82.8145L79.2773 16.2786V19.1086C79.2773 19.7062 79.3935 19.9115 79.9221 19.9115H80.0397V20.1186C79.744 20.1186 79.4493 20.0915 79.154 20.0915C78.8449 20.0915 78.5283 20.1186 78.2192 20.1186V19.9115H78.3159C78.7907 19.9115 78.933 19.5895 78.933 19.0405V16.1476C78.933 15.7634 78.6187 15.5305 78.3087 15.5305H78.2192V15.3243C78.4801 15.3243 78.7482 15.3514 79.0088 15.3514C79.215 15.3514 79.4135 15.3243 79.6202 15.3243L82.6764 18.7647Z" fill="#211E1F"/>
<path d="M83.075 20.2525L82.7908 20.2425L79.3065 16.3583V19.1107C79.314 19.7078 79.405 19.8769 79.9207 19.8831H80.0693V19.914V20.1497H80.0393C79.7416 20.1497 79.4469 20.1221 79.1536 20.1221C78.8454 20.1221 78.5302 20.1497 78.2183 20.1497H78.1897V20.1202V19.8831H78.2183H78.3155C78.7683 19.8817 78.8983 19.5903 78.904 19.0426V16.1497C78.903 15.784 78.6035 15.5621 78.3083 15.5616H78.1897V15.5326V15.2969H78.2183C78.4816 15.2969 78.7492 15.3231 79.0083 15.3231C79.2121 15.3231 79.4102 15.2969 79.6426 15.3069L82.6597 18.7045V16.1788C82.6578 15.6322 82.2921 15.5664 82.0911 15.5617H81.9107V15.5327V15.297H81.9417C82.2649 15.297 82.5816 15.3232 82.9011 15.3232C83.183 15.3232 83.463 15.297 83.7478 15.297H83.7773V15.3264V15.5617H83.7478H83.6439C83.3615 15.5698 83.0692 15.5955 83.0635 16.4045V19.5298C83.0635 19.7698 83.0687 20.0093 83.1021 20.2193L83.1077 20.2526H83.075V20.2525ZM82.8142 20.1925H83.0389C83.0089 19.9864 83.0037 19.7578 83.0037 19.5297V16.4044C83.0037 15.5787 83.3499 15.504 83.6442 15.5016H83.7184V15.3564C83.4475 15.3583 83.1761 15.383 82.9014 15.383C82.5889 15.383 82.2817 15.3583 81.9708 15.3564V15.5016H82.0913C82.3042 15.504 82.7184 15.5978 82.7184 16.1787L82.7109 18.774L82.698 18.7883L82.6761 18.8102L79.6199 15.3564C79.4176 15.3564 79.217 15.3831 79.0085 15.3831C78.7556 15.3831 78.498 15.3583 78.248 15.3564V15.5016H78.3085C78.6309 15.504 78.9627 15.7474 78.9627 16.1497V19.0426C78.9627 19.5916 78.8095 19.9431 78.3156 19.945L78.248 19.9444V20.0897C78.5461 20.0883 78.8518 20.0635 79.1537 20.0635C79.4399 20.0635 79.7242 20.0883 80.0095 20.0897V19.945H79.9208C79.3819 19.9444 79.2471 19.7078 79.2471 19.1106V16.2035L82.8142 20.1925ZM82.6598 18.7535V18.7511L82.6541 18.7459L82.6598 18.7535Z" fill="#211E1F"/>
<path d="M84.8514 19.1366C84.7843 19.3695 84.7009 19.5495 84.7009 19.6719C84.7009 19.8785 84.99 19.9119 85.2153 19.9119H85.2919V20.119C85.0171 20.1042 84.7353 20.0919 84.4605 20.0919C84.2124 20.0919 83.9662 20.1043 83.72 20.119V19.9119H83.759C84.0281 19.9119 84.2557 19.7542 84.3572 19.4652L85.4572 16.3137C85.5457 16.0594 85.67 15.7161 85.7101 15.4614C85.93 15.3866 86.2043 15.2495 86.3362 15.1666C86.3557 15.1595 86.3695 15.1523 86.3905 15.1523C86.411 15.1523 86.4238 15.1523 86.4376 15.1738C86.4585 15.2281 86.4801 15.2904 86.5005 15.3452L87.7634 18.9376C87.8457 19.1776 87.9277 19.4314 88.0181 19.6381C88.1005 19.8304 88.2453 19.9119 88.471 19.9119H88.5129V20.119C88.2034 20.1042 87.8943 20.0919 87.5643 20.0919C87.2286 20.0919 86.8848 20.1043 86.5343 20.119V19.9119H86.6106C86.7672 19.9119 87.0367 19.8852 87.0367 19.7133C87.0367 19.6242 86.9743 19.439 86.8977 19.2185L86.631 18.4219H85.072L84.8514 19.1366ZM85.8552 16.0938H85.8414L85.2019 18.0376H86.4871L85.8552 16.0938Z" fill="#211E1F"/>
<path d="M88.51 20.1497C88.2009 20.1373 87.8924 20.1221 87.5643 20.1221C87.2295 20.1221 86.8857 20.1373 86.5352 20.1497L86.5048 20.1516V20.1202V19.884H86.5343H86.609C86.769 19.884 87.0057 19.8468 87.0062 19.7149C87.0076 19.6368 86.9457 19.4497 86.8691 19.2297L86.6081 18.453H85.0924L84.88 19.1468C84.8115 19.382 84.7295 19.5625 84.731 19.6735C84.731 19.8421 84.988 19.884 85.2153 19.884H85.32V19.9135V20.1516L85.2896 20.1497C85.0147 20.1373 84.7338 20.1221 84.4605 20.1221C84.2143 20.1221 83.9676 20.1373 83.72 20.1497L83.6899 20.1516V20.1202V19.884H83.72H83.759C84.0152 19.883 84.2295 19.7359 84.3295 19.4573L85.4286 16.3054C85.5162 16.0507 85.6399 15.7083 85.7009 15.4354C85.9167 15.3607 86.1923 15.2235 86.3257 15.1397C86.3437 15.1335 86.3624 15.1254 86.3904 15.1254C86.4086 15.1235 86.4437 15.1278 86.4657 15.1654C86.4861 15.2192 86.5061 15.2816 86.529 15.3373L87.7918 18.9292C87.8738 19.1702 87.9562 19.424 88.0452 19.6283C88.1256 19.8102 88.2509 19.8821 88.4699 19.884H88.5414V19.9135V20.1516L88.51 20.1497ZM86.5638 20.0892C86.9033 20.0763 87.2377 20.063 87.5643 20.063C87.8838 20.063 88.1834 20.0763 88.4824 20.0882L88.4814 19.9448H88.47C88.2376 19.9454 88.0753 19.8539 87.99 19.6516C87.8995 19.443 87.8177 19.1882 87.7357 18.9487L86.4718 15.3563C86.4514 15.3016 86.4305 15.2392 86.4138 15.1925C86.408 15.1839 86.4086 15.1839 86.4033 15.1839H86.3904C86.3762 15.1839 86.3685 15.1887 86.3518 15.1935C86.218 15.2778 85.9427 15.4148 85.7395 15.4678C85.697 15.7278 85.5723 16.0701 85.4838 16.3249L84.3843 19.4773C84.2799 19.7754 84.04 19.9454 83.759 19.9448H83.7489V20.0882C83.9852 20.0763 84.2213 20.063 84.4604 20.063C84.7266 20.063 84.9975 20.0763 85.2618 20.0882V19.9448H85.2152C84.9919 19.942 84.6785 19.9178 84.6705 19.6735C84.6718 19.5373 84.757 19.3625 84.8233 19.1297L84.8514 19.1387L84.8233 19.1287L85.0495 18.3944H86.6509L86.9261 19.2106C87.0018 19.4316 87.0642 19.6139 87.0642 19.7149C87.0542 19.9258 86.7661 19.9406 86.6089 19.9448H86.5637V20.0892H86.5638ZM85.1609 18.0683L85.8195 16.0654H85.8404H85.8552H85.8767L86.5257 18.0683H85.1609ZM85.2433 18.0092H86.4443L85.8471 16.1697L85.2433 18.0092Z" fill="#211E1F"/>
<path d="M90.2433 19.4452C90.2433 19.72 90.4338 19.8018 90.6538 19.8299C90.9352 19.8509 91.2443 19.8509 91.5615 19.8161C91.8491 19.7814 92.0967 19.6166 92.2195 19.4452C92.3291 19.2937 92.391 19.1014 92.4324 18.9504H92.6314C92.5562 19.3418 92.46 19.7276 92.3772 20.1185C91.7743 20.1185 91.1686 20.0914 90.5652 20.0914C89.96 20.0914 89.3567 20.1185 88.7524 20.1185V19.9113H88.8467C89.0953 19.9113 89.3639 19.878 89.3639 19.4518V15.9223C89.3639 15.5642 89.0952 15.5304 88.8467 15.5304H88.7524V15.3242C89.1153 15.3242 89.4729 15.3514 89.8362 15.3514C90.1876 15.3514 90.5305 15.3242 90.881 15.3242V15.5304H90.7081C90.4481 15.5304 90.2433 15.538 90.2433 15.9009V19.4452Z" fill="#211E1F"/>
<path d="M92.3774 20.1497C91.7722 20.1497 91.168 20.1221 90.5656 20.1221C89.9607 20.1221 89.3565 20.1497 88.7513 20.1497H88.7222V20.1202V19.884H88.7513H88.847C89.096 19.8783 89.3313 19.8611 89.3341 19.454V15.9231C89.3312 15.5893 89.0974 15.5664 88.847 15.5616H88.7222V15.5326V15.2969H88.7513C89.1165 15.2969 89.4741 15.3231 89.8369 15.3231C90.1855 15.3231 90.5284 15.2969 90.8812 15.2969H90.9094V15.3264V15.5616H90.8812H90.7089C90.4427 15.5692 90.277 15.5568 90.2717 15.9031V19.4474C90.2736 19.7031 90.4413 19.7721 90.6556 19.8021C90.777 19.8107 90.9041 19.8159 91.0366 19.8159C91.2046 19.8159 91.3794 19.8078 91.5566 19.7888C91.8365 19.756 92.0775 19.5945 92.1956 19.4307C92.3013 19.284 92.3623 19.0954 92.4032 18.9454L92.4094 18.9226H92.4322H92.668L92.6617 18.9588C92.5842 19.3517 92.4899 19.7355 92.4066 20.1264L92.4009 20.1498H92.3776H92.3774V20.1497ZM92.3526 20.0897C92.4322 19.7173 92.5222 19.353 92.596 18.9815H92.455C92.4122 19.1311 92.3512 19.3154 92.2432 19.4654C92.115 19.6434 91.8607 19.8111 91.5631 19.8477C91.3832 19.8663 91.205 19.8758 91.0365 19.8758C90.9036 19.8758 90.7746 19.8696 90.6503 19.861C90.427 19.8363 90.2103 19.741 90.2113 19.4473V15.903C90.2113 15.5215 90.4526 15.502 90.7088 15.502H90.8507V15.3563C90.5122 15.3582 90.1789 15.3834 89.8369 15.3834C89.4812 15.3834 89.1335 15.3582 88.7812 15.3563V15.502H88.8469C89.0922 15.502 89.3921 15.5449 89.3921 15.923V19.4539C89.3921 19.8982 89.0935 19.9444 88.8469 19.9444H88.7812V20.0896C89.375 20.0892 89.9688 20.0634 90.5655 20.0634C91.1622 20.0634 91.7585 20.0892 92.3526 20.0897Z" fill="#211E1F"/>
<path d="M92.5481 15.1289C92.9619 15.1289 93.2709 15.447 93.2709 15.8546C93.2709 16.2603 92.9619 16.5756 92.5481 16.5756C92.1342 16.5756 91.8247 16.2603 91.8247 15.8546C91.8247 15.447 92.1342 15.1289 92.5481 15.1289ZM92.5481 16.4408C92.8714 16.4408 93.12 16.1646 93.12 15.8546C93.12 15.5427 92.8752 15.2641 92.5481 15.2641C92.2229 15.2641 91.9742 15.5428 91.9742 15.8546C91.9742 16.1646 92.2229 16.4408 92.5481 16.4408ZM92.188 16.2356V16.1999C92.277 16.1875 92.2932 16.1903 92.2932 16.1351V15.5999C92.2932 15.5247 92.2851 15.499 92.1914 15.5027V15.466H92.5614C92.689 15.466 92.8056 15.5265 92.8056 15.658C92.8056 15.7656 92.7342 15.8451 92.6347 15.876L92.7532 16.0417C92.8089 16.117 92.8713 16.1875 92.9128 16.2122V16.2355H92.7719C92.7042 16.2355 92.6452 16.0931 92.5118 15.9022H92.4318V16.1427C92.4318 16.1903 92.4485 16.1874 92.5376 16.1998V16.2355L92.188 16.2356ZM92.4318 15.8546H92.5171C92.6104 15.8546 92.6542 15.7837 92.6542 15.6699C92.6542 15.5546 92.5866 15.5141 92.5123 15.5141H92.4318V15.8546Z" fill="#211E1F"/>
<path d="M18.399 24C24.9585 24.0314 30.9457 18.6504 30.9457 12.1043C30.9457 4.94571 24.9585 -0.00238009 18.399 8.58885e-07H12.7538C6.11567 -0.00238009 0.651855 4.94719 0.651855 12.1043C0.651855 18.6519 6.11567 24.0314 12.7538 24H18.399Z" fill="#0079BE"/>
<path d="M12.7807 0.992188C6.71501 0.994092 1.79977 5.91076 1.79834 11.9789C1.79977 18.046 6.71496 22.9622 12.7807 22.9641C18.8479 22.9622 23.7641 18.046 23.765 11.9789C23.7641 5.91076 18.8479 0.994092 12.7807 0.992188ZM5.81929 11.9789C5.82501 9.01366 7.67691 6.48509 10.2883 5.48028V18.476C7.67691 17.4718 5.82496 14.9446 5.81929 11.9789ZM15.2722 18.4789V5.47985C17.8845 6.48223 19.7393 9.01223 19.7441 11.9789C19.7393 14.9465 17.8845 17.4746 15.2722 18.4789Z" fill="white"/>
<path d="M34.7929 5.16267C34.7929 4.02739 34.201 4.10215 33.6333 4.08981V3.76172C34.1253 3.786 34.6295 3.786 35.1224 3.786C35.6524 3.786 36.372 3.76172 37.3062 3.76172C40.5738 3.76172 42.3533 5.94458 42.3533 8.17977C42.3533 9.42977 41.622 12.5721 37.1543 12.5721C36.511 12.5721 35.9172 12.5473 35.3243 12.5473C34.7567 12.5473 34.201 12.5598 33.6333 12.5721V12.2445C34.39 12.1683 34.7567 12.1431 34.7929 11.2845L34.7929 5.16267ZM36.0301 11.0831C36.0301 12.055 36.7248 12.1683 37.3429 12.1683C40.0696 12.1683 40.9648 10.1107 40.9648 8.22977C40.9648 5.87024 39.4501 4.16643 37.0149 4.16643C36.4968 4.16643 36.2587 4.20358 36.0301 4.21696L36.0301 11.0831Z" fill="#211E1F"/>
<path d="M42.7954 12.2474H43.0345C43.3873 12.2474 43.6402 12.2474 43.6402 11.8298V8.40981C43.6402 7.8551 43.4511 7.7779 42.984 7.52695V7.32457C43.5769 7.14648 44.2846 6.90838 44.334 6.87029C44.4231 6.81981 44.4983 6.80648 44.5616 6.80648C44.6241 6.80648 44.6502 6.88267 44.6502 6.9841V11.8298C44.6502 12.2474 44.9278 12.2474 45.2812 12.2474H45.4955V12.5755C45.0659 12.5755 44.624 12.5503 44.1707 12.5503C43.7164 12.5503 43.2617 12.5627 42.7955 12.5755V12.2474H42.7954ZM44.1454 4.8631C43.8169 4.8631 43.5274 4.56029 43.5274 4.23214C43.5274 3.91595 43.8302 3.625 44.1454 3.625C44.4726 3.625 44.764 3.89124 44.764 4.23214C44.764 4.5731 44.4855 4.8631 44.1454 4.8631Z" fill="#211E1F"/>
<path d="M46.6948 8.48326C46.6948 8.01659 46.5552 7.89088 45.9633 7.65088V7.4114C46.5057 7.23474 47.0224 7.07045 47.6285 6.80473C47.6662 6.80473 47.7033 6.83045 47.7033 6.93093V7.75183C48.4238 7.23474 49.0424 6.80469 49.889 6.80469C50.9604 6.80469 51.339 7.5875 51.339 8.57178V11.828C51.339 12.2456 51.6166 12.2456 51.9704 12.2456H52.1976V12.5737C51.7547 12.5737 51.3133 12.5485 50.86 12.5485C50.4051 12.5485 49.9503 12.5609 49.4966 12.5737V12.2456H49.7232C50.0775 12.2456 50.3285 12.2456 50.3285 11.828V8.55988C50.3285 7.8394 49.889 7.48654 49.1685 7.48654C48.7652 7.48654 48.1213 7.81469 47.7032 8.09273V11.8279C47.7032 12.2456 47.9822 12.2456 48.3361 12.2456H48.5628V12.5737C48.1213 12.5737 47.679 12.5484 47.2247 12.5484C46.7709 12.5484 46.3157 12.5609 45.8618 12.5737V12.2456H46.0894C46.4428 12.2456 46.6947 12.2456 46.6947 11.8279V8.48326H46.6948Z" fill="#211E1F"/>
<path d="M53.1571 9.08993C53.1308 9.20378 53.1308 9.39278 53.1571 9.82231C53.2314 11.0209 54.0033 12.0052 55.0113 12.0052C55.7061 12.0052 56.2499 11.6266 56.7161 11.16L56.8923 11.3371C56.3114 12.1066 55.5922 12.7628 54.558 12.7628C52.5508 12.7628 52.147 10.8185 52.147 10.0114C52.147 7.53707 53.8127 6.80469 54.6955 6.80469C55.7184 6.80469 56.817 7.44807 56.8289 8.78612C56.8289 8.86278 56.8289 8.93754 56.817 9.01421L56.7027 9.08993H53.1571ZM55.3914 8.68569C55.7061 8.68569 55.7433 8.5214 55.7433 8.37045C55.7433 7.72659 55.3523 7.20897 54.6452 7.20897C53.8761 7.20897 53.3461 7.77612 53.1946 8.68569H55.3914Z" fill="#211E1F"/>
<path d="M57.1196 12.2457H57.4606C57.8129 12.2457 58.0653 12.2457 58.0653 11.828V8.28183C58.0653 7.89088 57.5992 7.81469 57.4092 7.71373V7.52516C58.3306 7.13326 58.8358 6.80469 58.9505 6.80469C59.0253 6.80469 59.0624 6.84278 59.0624 6.96945V8.10516H59.0892C59.4039 7.61326 59.9349 6.80469 60.7039 6.80469C61.0196 6.80469 61.423 7.01897 61.423 7.47374C61.423 7.81469 61.1839 8.1185 60.8306 8.1185C60.4378 8.1185 60.4378 7.81469 59.9968 7.81469C59.7821 7.81469 59.0759 8.10516 59.0759 8.86278V11.828C59.0759 12.2456 59.3277 12.2456 59.6815 12.2456H60.3877V12.5738C59.6934 12.5609 59.1653 12.5485 58.6215 12.5485C58.1044 12.5485 57.5739 12.5609 57.1197 12.5738L57.1196 12.2457Z" fill="#211E1F"/>
<path d="M61.9782 10.8184C62.1425 11.6518 62.6468 12.359 63.5686 12.359C64.3115 12.359 64.5895 11.9047 64.5895 11.4628C64.5895 9.97326 61.8391 10.4528 61.8391 8.42088C61.8391 7.71373 62.4076 6.80469 63.7953 6.80469C64.1986 6.80469 64.7409 6.91897 65.2328 7.17183L65.3224 8.45807H65.0315C64.9057 7.66373 64.4643 7.20902 63.6557 7.20902C63.151 7.20902 62.6719 7.49954 62.6719 8.04188C62.6719 9.51997 65.5995 9.06426 65.5995 11.0457C65.5995 11.8785 64.9304 12.7628 63.4286 12.7628C62.9238 12.7628 62.3309 12.5862 61.8895 12.3343L61.7505 10.8824L61.9782 10.8184Z" fill="#211E1F"/>
<path d="M76.9961 6.04507H76.6813C76.4414 4.56888 75.3938 3.97507 73.9809 3.97507C72.5285 3.97507 70.4209 4.94646 70.4209 7.97555C70.4209 10.527 72.2394 12.3565 74.1823 12.3565C75.4313 12.3565 76.4671 11.4984 76.7194 10.1727L77.009 10.2479L76.7194 12.0907C76.1894 12.4198 74.7632 12.7603 73.9294 12.7603C70.9771 12.7603 69.1099 10.8542 69.1099 8.01412C69.1099 5.4265 71.4189 3.57031 73.8922 3.57031C74.9142 3.57031 75.8985 3.89984 76.8704 4.24079L76.9961 6.04507Z" fill="#211E1F"/>
<path d="M77.451 12.2459H77.6901C78.0439 12.2459 78.2972 12.2459 78.2972 11.8283V4.79878C78.2972 3.97783 78.1077 3.95254 77.6276 3.81397V3.61207C78.1324 3.44831 78.6624 3.22064 78.9277 3.06878C79.0653 2.99354 79.1672 2.92969 79.2043 2.92969C79.2815 2.92969 79.3067 3.00593 79.3067 3.10731V11.8283C79.3067 12.2459 79.5838 12.2459 79.9376 12.2459H80.1505V12.574C79.7234 12.574 79.2815 12.5488 78.8267 12.5488C78.3729 12.5488 77.9186 12.5612 77.4509 12.574V12.2459H77.451Z" fill="#211E1F"/>
<path d="M85.5538 11.8761C85.5538 12.1042 85.6919 12.1166 85.9061 12.1166C86.058 12.1166 86.2466 12.1042 86.4113 12.1042V12.3699C85.8681 12.4199 84.8333 12.6852 84.5932 12.7604L84.5299 12.7223V11.7009C83.7738 12.3189 83.1923 12.7604 82.2956 12.7604C81.6142 12.7604 80.9076 12.3189 80.9076 11.2594V8.02704C80.9076 7.69895 80.8576 7.38319 80.1519 7.32038V7.08038C80.6067 7.068 81.6143 6.99223 81.779 6.99223C81.919 6.99223 81.919 7.08038 81.919 7.358V10.6137C81.919 10.9932 81.919 12.0784 83.0161 12.0784C83.4452 12.0784 84.0128 11.7503 84.5424 11.3099V7.91271C84.5424 7.66128 83.9371 7.52271 83.4838 7.396V7.16885C84.6181 7.09266 85.3261 6.99219 85.4514 6.99219C85.5537 6.99219 85.5537 7.08028 85.5537 7.21981L85.5538 11.8761Z" fill="#211E1F"/>
<path d="M88.0652 7.71402C88.5695 7.28493 89.2508 6.80497 89.9456 6.80497C91.4098 6.80497 92.2923 8.08116 92.2923 9.45588C92.2923 11.1093 91.0813 12.763 89.2755 12.763C88.3422 12.763 87.8503 12.4597 87.5217 12.3215L87.1437 12.6111L86.8794 12.473C86.9913 11.7283 87.0556 10.9959 87.0556 10.2264V4.79874C87.0556 3.97783 86.8651 3.95254 86.386 3.81397V3.61207C86.8922 3.44831 87.4207 3.22064 87.686 3.06874C87.8251 2.9935 87.9255 2.92969 87.9646 2.92969C88.0398 2.92969 88.065 3.00593 88.065 3.10731V7.71397H88.0652V7.71402ZM88.0652 11.1469C88.0652 11.6269 88.5189 12.4355 89.3647 12.4355C90.7151 12.4355 91.2827 11.1093 91.2827 9.9855C91.2827 8.62264 90.2489 7.48693 89.2642 7.48693C88.7961 7.48693 88.4056 7.79026 88.0651 8.08116L88.0652 11.1469Z" fill="#211E1F"/>
<path d="M33.6184 19.9114H33.7151C33.9617 19.9114 34.2227 19.8781 34.2227 19.5204V15.9223C34.2227 15.5642 33.9617 15.5304 33.7151 15.5304H33.6184V15.3242C33.8865 15.3242 34.2984 15.3514 34.636 15.3514C34.9789 15.3514 35.3903 15.3242 35.7132 15.3242V15.5304H35.6165C35.3703 15.5304 35.1089 15.5642 35.1089 15.9223V19.5204C35.1089 19.8781 35.3703 19.9114 35.6165 19.9114H35.7132V20.1186C35.3836 20.1186 34.9708 20.0914 34.6284 20.0914C34.2918 20.0914 33.8865 20.1186 33.6184 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M35.7134 20.1468C35.3814 20.1468 34.9701 20.1192 34.6281 20.1192C34.2924 20.1192 33.8886 20.1468 33.6186 20.1468H33.5891V20.1173V19.9111V19.8811H33.6186H33.7148C33.9638 19.8754 34.1905 19.8554 34.1929 19.5197V15.9215C34.1905 15.5858 33.9639 15.5634 33.7148 15.5587H33.5891V15.5297V15.293H33.6186C33.8886 15.293 34.3001 15.3201 34.6357 15.3201C34.9776 15.3201 35.3886 15.293 35.7134 15.293H35.7439V15.3244V15.5587H35.7134H35.6172C35.3681 15.5634 35.14 15.5858 35.1386 15.9215V19.5197C35.14 19.8554 35.3681 19.8754 35.6172 19.8811H35.7438V19.9111V20.1468H35.7134ZM35.6838 20.0882V19.9415H35.6172C35.372 19.9415 35.0801 19.8992 35.0786 19.5197V15.9215C35.08 15.542 35.3719 15.4992 35.6172 15.4992H35.6838V15.3534C35.3667 15.3534 34.9691 15.3801 34.6357 15.3801C34.3095 15.3801 33.9148 15.3554 33.6491 15.3534V15.4992H33.7148C33.9595 15.4992 34.2524 15.542 34.2524 15.9215V19.5197C34.2524 19.8992 33.9595 19.9415 33.7148 19.9415H33.6491V20.0882C33.9148 20.0854 34.3028 20.0606 34.6281 20.0606C34.9624 20.0606 35.36 20.0863 35.6838 20.0882Z" fill="#211E1F"/>
<path d="M40.4313 18.7647L40.4451 18.7514V16.1762C40.4451 15.6124 40.0532 15.5305 39.8475 15.5305H39.696V15.3242C40.0194 15.3242 40.3351 15.3514 40.6575 15.3514C40.9388 15.3514 41.2217 15.3242 41.5027 15.3242V15.5305H41.3998C41.1108 15.5305 40.7879 15.5852 40.7879 16.4024V19.5281C40.7879 19.7681 40.795 20.0081 40.8288 20.221H40.5675L37.0317 16.2786V19.1086C37.0317 19.7062 37.1475 19.9115 37.677 19.9115H37.7931V20.1186C37.4984 20.1186 37.2036 20.0915 36.9079 20.0915C36.5998 20.0915 36.2836 20.1186 35.9741 20.1186V19.9115H36.0703C36.5441 19.9115 36.688 19.5895 36.688 19.0405V16.1476C36.688 15.7634 36.3713 15.5305 36.0637 15.5305H35.9742V15.3243C36.2351 15.3243 36.5027 15.3514 36.7632 15.3514C36.9694 15.3514 37.1689 15.3243 37.3746 15.3243L40.4313 18.7647Z" fill="#211E1F"/>
<path d="M40.8284 20.2531L40.5452 20.2425L37.0604 16.3583V19.1107C37.0684 19.7078 37.1594 19.8774 37.6765 19.884H37.8237V19.9135V20.1497H37.7932C37.4961 20.1497 37.2004 20.1221 36.9074 20.1221C36.5998 20.1221 36.2846 20.1497 35.9732 20.1497H35.9432V20.1202V19.884H35.9732H36.0698C36.5236 19.8816 36.6532 19.5902 36.6584 19.0426V16.1502C36.6574 15.7845 36.3574 15.5626 36.0632 15.5616H35.9431V15.5312V15.2969H35.9731C36.2355 15.2969 36.5045 15.3231 36.7622 15.3231C36.9664 15.3231 37.1655 15.2969 37.3969 15.3069L40.415 18.7045V16.1788C40.4112 15.6322 40.047 15.5664 39.8469 15.5616H39.665V15.5312V15.2969H39.6955C40.0198 15.2969 40.336 15.3231 40.6569 15.3231C40.9364 15.3231 41.2179 15.2969 41.5017 15.2969H41.5317V15.3264V15.5616H41.5017H41.3993C41.116 15.5697 40.825 15.5944 40.817 16.4044V19.5297C40.817 19.7697 40.8241 20.0097 40.8574 20.2178L40.8641 20.253H40.8284V20.2531ZM40.5675 20.1925H40.7947C40.7638 19.9864 40.7585 19.7578 40.7585 19.5297V16.4044C40.7585 15.5802 41.1037 15.5021 41.3994 15.5021H41.4718V15.3564C41.2014 15.3583 40.9299 15.383 40.6571 15.383C40.3428 15.383 40.0371 15.3583 39.7262 15.3564L39.7257 15.5021H39.8471C40.0581 15.5021 40.4747 15.5964 40.4747 16.1788L40.4652 18.774L40.4514 18.7883L40.4281 18.8097L37.3743 15.3564C37.1705 15.3564 36.9714 15.383 36.7624 15.383C36.5104 15.383 36.2528 15.3583 36.0038 15.3564L36.0024 15.5021H36.0633C36.3857 15.5021 36.7166 15.7483 36.7166 16.1502V19.0425C36.7166 19.5915 36.5638 19.943 36.07 19.9449L36.0038 19.943V20.0911C36.3014 20.0882 36.6071 20.0634 36.9075 20.0634C37.1943 20.0634 37.4795 20.0883 37.7633 20.0911V19.9449H37.6766C37.1361 19.943 37.0019 19.7078 37.0014 19.1106V16.2034L40.5675 20.1925ZM40.4151 18.7531V18.7507L40.4094 18.7459L40.4151 18.7531Z" fill="#211E1F"/>
<path d="M42.5303 15.6694C42.0146 15.6694 41.9951 15.7933 41.8922 16.2942H41.686C41.7132 16.1023 41.7475 15.9104 41.7684 15.7104C41.796 15.518 41.8093 15.3265 41.8093 15.1275H41.9746C42.0298 15.3337 42.2013 15.3266 42.3875 15.3266H45.9298C46.1155 15.3266 46.287 15.3199 46.3013 15.1133L46.465 15.1409C46.4384 15.3266 46.4107 15.5119 46.3898 15.6975C46.3774 15.8828 46.3774 16.0685 46.3774 16.2532L46.1708 16.3299C46.1565 16.0761 46.1222 15.6694 45.6627 15.6694H44.5365V19.3237C44.5365 19.8532 44.777 19.9138 45.1055 19.9138H45.2365V20.1209C44.9688 20.1209 44.4875 20.0938 44.1174 20.0938C43.7056 20.0938 43.2241 20.1209 42.956 20.1209V19.9138H43.0869C43.4655 19.9138 43.6569 19.8799 43.6569 19.338V15.6694H42.5303Z" fill="#211E1F"/>
<path d="M45.2376 20.1496C44.9671 20.1496 44.4866 20.122 44.1176 20.122C43.7061 20.122 43.2257 20.1496 42.9561 20.1496H42.9276V20.1206V19.8839H42.9561H43.0871C43.4657 19.8749 43.618 19.8701 43.6266 19.3377V15.6992H42.5304V15.6691V15.6386H43.6862V19.3377C43.6862 19.8886 43.4643 19.9444 43.0871 19.9448H42.9862V20.0896C43.2571 20.0882 43.719 20.0634 44.1176 20.0634C44.4758 20.0634 44.9348 20.0882 45.2062 20.0896V19.9448H45.1057C44.7738 19.9444 44.5067 19.8629 44.5067 19.3234V15.6386H45.6629C46.1238 15.6406 46.1838 16.0325 46.199 16.2872L46.3471 16.2325C46.3471 16.0534 46.3481 15.8739 46.3605 15.6929C46.3805 15.5163 46.4057 15.341 46.4314 15.1658L46.3266 15.1482C46.2948 15.3482 46.1019 15.3582 45.929 15.3563H42.3876H42.3519C42.1904 15.3563 42.0138 15.3486 41.9523 15.1568H41.839C41.838 15.3468 41.8247 15.5311 41.7985 15.7139C41.7785 15.9025 41.747 16.0839 41.7213 16.2654H41.8685C41.959 15.7867 42.018 15.6315 42.5304 15.6387V15.6692V15.6992C42.0228 15.7082 42.0333 15.7939 41.9213 16.3016L41.9161 16.3249H41.8923H41.6519L41.6557 16.2892C41.6833 16.0968 41.7181 15.9053 41.7385 15.7053C41.7671 15.5148 41.7804 15.3244 41.7804 15.1272V15.0972H41.8095H41.998L42.0028 15.1186C42.05 15.292 42.1771 15.2929 42.3519 15.2958H42.3876H45.929C46.1205 15.2929 46.2595 15.2901 46.2714 15.1105L46.2742 15.0781L46.3052 15.0848L46.499 15.1153L46.4947 15.1453C46.467 15.3291 46.44 15.5148 46.42 15.6991C46.4061 15.882 46.4061 16.0677 46.4061 16.2529V16.2744L46.3871 16.282L46.1438 16.3705L46.1419 16.3305C46.1238 16.0724 46.0966 15.6991 45.6628 15.6991H44.5666V19.3234C44.5728 19.8415 44.7785 19.8772 45.1056 19.8838H45.2666V19.9134V20.1496L45.2376 20.1496Z" fill="#211E1F"/>
<path d="M46.6851 19.9114H46.7817C47.0284 19.9114 47.2898 19.8781 47.2898 19.5204V15.9223C47.2898 15.5642 47.0284 15.5304 46.7817 15.5304H46.6851V15.3242C47.1032 15.3242 47.8184 15.3514 48.3941 15.3514C48.9722 15.3514 49.6851 15.3242 50.1517 15.3242C50.1403 15.619 50.1465 16.0733 50.1669 16.3747L49.9598 16.4299C49.927 15.9838 49.8445 15.6271 49.1231 15.6271H48.1693V17.4257H48.9856C49.3974 17.4257 49.4874 17.1928 49.5279 16.821H49.7336C49.7203 17.09 49.7132 17.3576 49.7132 17.6253C49.7132 17.8867 49.7203 18.1472 49.7336 18.4081L49.5279 18.449C49.4874 18.0372 49.4665 17.7695 48.9922 17.7695H48.1694V19.369C48.1694 19.8162 48.5661 19.8162 49.0061 19.8162C49.8303 19.8162 50.1936 19.7605 50.3999 18.9786L50.5923 19.0257C50.5023 19.3905 50.4203 19.7538 50.3594 20.1186C49.9194 20.1186 49.1294 20.0914 48.5122 20.0914C47.8932 20.0914 47.0766 20.1186 46.6851 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M50.3583 20.1497C49.9174 20.1497 49.1279 20.1216 48.5112 20.1216C47.8927 20.1216 47.0764 20.1497 46.6845 20.1497H46.6555V20.1207V19.9135V19.884H46.6845H46.7808C47.0298 19.8802 47.2555 19.8583 47.2589 19.5226V15.9244C47.2555 15.5892 47.0298 15.5668 46.7808 15.5616H46.6555V15.5326V15.2969H46.6845C47.1036 15.2969 47.8179 15.3231 48.3936 15.3231C48.9711 15.3231 49.6836 15.2969 50.1512 15.2969H50.1821L50.1807 15.3274C50.1759 15.4307 50.174 15.5525 50.174 15.6821C50.174 15.9197 50.1807 16.1792 50.1945 16.375L50.1955 16.3997L50.1726 16.4064L49.9312 16.4693L49.9298 16.4341C49.8893 15.9884 49.8298 15.665 49.1227 15.6584H48.1975L48.1965 17.3969H48.9851C49.3804 17.3931 49.4512 17.1907 49.4979 16.8207L49.5004 16.7936H49.527H49.7637L49.7632 16.8245C49.7499 17.0921 49.7413 17.3597 49.7413 17.6274C49.7413 17.8874 49.7499 18.1478 49.7632 18.4093L49.7637 18.4336L49.7389 18.4393L49.5004 18.4869L49.4979 18.4545C49.4508 18.0354 49.4474 17.8059 48.9912 17.8007L48.1974 17.8002V19.3712C48.198 19.7883 48.5579 19.7859 49.0056 19.7883C49.8322 19.7835 50.1637 19.7436 50.3708 18.9721L50.3775 18.9445L50.4065 18.9497L50.6266 19.0064L50.6198 19.035C50.5313 19.3988 50.4489 19.7616 50.3874 20.1254L50.3818 20.1497H50.3583ZM50.3331 20.0897C50.3927 19.7435 50.4711 19.3959 50.5555 19.0502L50.4198 19.0159C50.2141 19.7845 49.8159 19.853 49.0055 19.8478C48.5731 19.8478 48.1398 19.8478 48.1378 19.3711V17.7416H48.9912C49.4707 17.7364 49.5198 18.0259 49.5536 18.4168L49.7022 18.3859C49.6888 18.133 49.6827 17.8792 49.6827 17.6273C49.6827 17.3687 49.6888 17.1116 49.7022 16.853H49.5536C49.5155 17.2106 49.4036 17.4621 48.985 17.4573H48.1379V15.5983H49.1227C49.837 15.5934 49.9555 15.9621 49.986 16.394L50.1341 16.354C50.1222 16.1602 50.114 15.9116 50.114 15.6821C50.114 15.5644 50.1169 15.4535 50.1208 15.3564C49.6541 15.3583 48.9589 15.383 48.3936 15.383C47.8293 15.383 47.1346 15.3583 46.7141 15.3564V15.5021H46.7807C47.0255 15.5021 47.3179 15.5449 47.3188 15.9244V19.5226C47.3179 19.9012 47.0255 19.9431 46.7807 19.945H46.7141V20.0897C47.1146 20.0892 47.9079 20.0635 48.5112 20.0635C49.1169 20.0635 49.8902 20.0892 50.3331 20.0897Z" fill="#211E1F"/>
<path d="M51.5182 16.0523C51.5182 15.5514 51.2439 15.5309 51.0301 15.5309H50.9067V15.3242C51.1267 15.3242 51.5519 15.3518 51.971 15.3518C52.3829 15.3518 52.7129 15.3242 53.0763 15.3242C53.941 15.3242 54.7111 15.558 54.7111 16.5342C54.7111 17.1509 54.2992 17.529 53.7567 17.7428L54.9305 19.4999C55.1229 19.7904 55.2596 19.8718 55.5967 19.9118V20.119C55.3701 20.119 55.15 20.0918 54.9238 20.0918C54.711 20.0918 54.4905 20.119 54.2785 20.119C53.75 19.4252 53.2957 18.6833 52.8495 17.8928H52.3977V19.3633C52.3977 19.8928 52.6439 19.9118 52.9595 19.9118H53.0834V20.119C52.691 20.119 52.2944 20.0919 51.9024 20.0919C51.5724 20.0919 51.2495 20.119 50.9067 20.119V19.9118H51.0301C51.2853 19.9118 51.5182 19.7966 51.5182 19.5418V16.0523ZM52.3976 17.6456H52.7329C53.42 17.6456 53.79 17.3847 53.79 16.5742C53.79 15.9637 53.3991 15.5718 52.7872 15.5718C52.581 15.5718 52.4934 15.5933 52.3975 15.5995V17.6456H52.3976Z" fill="#211E1F"/>
<path d="M55.5975 20.1467C55.3675 20.1467 55.149 20.1191 54.9233 20.1191C54.7137 20.1191 54.4947 20.1467 54.2552 20.1353C53.7285 19.4443 53.2771 18.7067 52.8333 17.9219H52.4275V19.361C52.4347 19.8777 52.6423 19.8734 52.9599 19.881H53.1137V19.9105V20.1467H53.0832C52.6908 20.1467 52.2923 20.1191 51.9023 20.1191C51.5742 20.1191 51.2523 20.1467 50.9075 20.1467H50.8774V20.1172V19.881H50.9075H51.0308C51.2784 19.8796 51.487 19.772 51.488 19.5405V16.0511C51.4828 15.5634 51.2442 15.5663 51.0308 15.5592H50.8774V15.5296V15.293H50.9075C51.1299 15.293 51.5537 15.3201 51.9718 15.3201C52.3817 15.3201 52.7118 15.293 53.0775 15.293C53.9428 15.2949 54.7399 15.5339 54.7423 16.5311C54.7423 17.1515 54.3323 17.5386 53.8023 17.7549L54.9561 19.4824C55.148 19.7672 55.2675 19.8382 55.6018 19.881L55.627 19.8848V19.9105V20.1467H55.5975V20.1467ZM52.3976 17.8619H52.8671L52.8752 17.8771C53.3228 18.6662 53.7737 19.4071 54.2794 20.0881C54.489 20.0881 54.7094 20.06 54.9233 20.06C55.1427 20.06 55.3542 20.0838 55.568 20.0871V19.9366C55.2456 19.8966 55.0947 19.8004 54.9071 19.5152L53.7123 17.7271L53.7461 17.7133C54.2832 17.5019 54.6809 17.1347 54.6813 16.5309C54.6809 15.578 53.9408 15.3571 53.0775 15.3533C52.7151 15.3533 52.3856 15.3804 51.9718 15.3804C51.5685 15.3804 51.1613 15.3552 50.9365 15.3533V15.499H51.0308C51.2442 15.4995 51.5479 15.5347 51.5479 16.051V19.5404C51.5479 19.8162 51.2893 19.9419 51.0308 19.9423H50.9365V20.0871C51.2671 20.0861 51.5799 20.06 51.9023 20.06C52.2865 20.06 52.6737 20.0862 53.0537 20.0871V19.9423H52.9599C52.6465 19.9418 52.3675 19.9028 52.3675 19.3609V17.8619H52.3975H52.3976ZM52.3976 17.6733H52.3675V15.5704L52.3937 15.5681C52.4875 15.561 52.5804 15.5414 52.788 15.5414C53.4138 15.5414 53.8204 15.9481 53.8213 16.5742C53.8194 17.3942 53.4261 17.6728 52.7337 17.6733H52.3976V17.6733ZM52.7337 17.6143C53.4136 17.6085 53.7556 17.3724 53.7628 16.5743C53.759 15.9743 53.3861 15.6019 52.788 15.5995C52.6022 15.5995 52.5151 15.6166 52.4275 15.6243V17.6143H52.7337Z" fill="#211E1F"/>
<path d="M60.2598 18.7647L60.2722 18.7514V16.1762C60.2722 15.6124 59.8813 15.5305 59.6756 15.5305H59.5251V15.3242C59.8475 15.3242 60.1628 15.3514 60.4861 15.3514C60.768 15.3514 61.0485 15.3242 61.3318 15.3242V15.5305H61.2285C60.9399 15.5305 60.617 15.5852 60.617 16.4024V19.5281C60.617 19.7681 60.6237 20.0081 60.6575 20.221H60.3971L56.8609 16.2786V19.1086C56.8609 19.7062 56.9775 19.9115 57.5061 19.9115H57.6228V20.1186C57.328 20.1186 57.0323 20.0915 56.7376 20.0915C56.4275 20.0915 56.1118 20.1186 55.8032 20.1186V19.9115H55.8985C56.3728 19.9115 56.517 19.5895 56.517 19.0405V16.1476C56.517 15.7634 56.2013 15.5305 55.8928 15.5305H55.8032V15.3243C56.0633 15.3243 56.3323 15.3514 56.5928 15.3514C56.7976 15.3514 56.9975 15.3243 57.2037 15.3243L60.2598 18.7647Z" fill="#211E1F"/>
<path d="M60.6574 20.2496L60.3746 20.2401L56.8894 16.3553V19.1073C56.8975 19.7049 56.988 19.8743 57.506 19.8811H57.6513V19.9106V20.1468H57.6213C57.3242 20.1468 57.0298 20.1186 56.7355 20.1186C56.4289 20.1186 56.1117 20.1468 55.8027 20.1468H55.7717V20.1177V19.8811H55.8027H55.8979C56.3512 19.8792 56.4813 19.5873 56.4855 19.0377V16.1468C56.4851 15.781 56.1856 15.5592 55.8923 15.5586H55.7717V15.5296V15.293H55.8027C56.0646 15.293 56.3332 15.3201 56.5922 15.3201C56.7941 15.3201 56.9932 15.293 57.2236 15.3024L60.2423 18.7015V16.1748C60.2403 15.6291 59.8746 15.5615 59.6751 15.5587H59.4936V15.5296V15.293H59.5237C59.8484 15.293 60.1646 15.3201 60.4855 15.3201C60.7656 15.3201 61.047 15.293 61.3298 15.293H61.3598V15.3239V15.5587H61.3298H61.2279C60.9446 15.5663 60.6526 15.5915 60.6455 16.4015V19.5267C60.6455 19.7667 60.6517 20.0048 60.6865 20.2163L60.6903 20.2496H60.6574ZM60.3965 20.1896H60.6222C60.5922 19.9834 60.5855 19.7548 60.5855 19.5267V16.4015C60.586 15.5772 60.9336 15.501 61.2279 15.4986H61.2998V15.3534C61.0303 15.3553 60.7584 15.3801 60.4855 15.3801C60.1703 15.3801 59.864 15.3553 59.5531 15.3534V15.4986H59.6751C59.8864 15.501 60.3027 15.5934 60.3027 16.1748L60.2932 18.771L60.2798 18.7853L60.2589 18.8072L57.2027 15.3534C56.9989 15.3534 56.7998 15.3801 56.5923 15.3801C56.338 15.3801 56.0813 15.3553 55.8313 15.3534V15.4987H55.8922C56.2146 15.5011 56.5456 15.7444 56.5456 16.1468V19.0377C56.5456 19.5891 56.3903 19.9401 55.898 19.942L55.8313 19.9415V20.0867C56.128 20.0853 56.4342 20.0605 56.7356 20.0605C57.0237 20.0605 57.309 20.0853 57.5927 20.0867V19.942H57.5061C56.9652 19.9415 56.8299 19.7049 56.829 19.1072V16.2015L60.3965 20.1896ZM60.2422 18.7505V18.7481L60.2369 18.7429L60.2422 18.7505Z" fill="#211E1F"/>
<path d="M62.436 19.1366C62.3665 19.3695 62.2836 19.5495 62.2836 19.6719C62.2836 19.8785 62.5727 19.9119 62.7984 19.9119H62.8751V20.119C62.5999 20.1042 62.3193 20.0919 62.0427 20.0919C61.7956 20.0919 61.5498 20.1043 61.3022 20.119V19.9119H61.3436C61.6112 19.9119 61.8384 19.7542 61.9398 19.4652L63.0398 16.3137C63.1284 16.0594 63.2532 15.7161 63.2947 15.4614C63.5132 15.3866 63.7884 15.2495 63.9185 15.1666C63.9399 15.1595 63.9518 15.1523 63.9732 15.1523C63.9937 15.1523 64.007 15.1523 64.0222 15.1738C64.0422 15.2281 64.0622 15.2904 64.0842 15.3452L65.3475 18.9376C65.4299 19.1776 65.5112 19.4314 65.6004 19.6381C65.6832 19.8304 65.828 19.9119 66.0551 19.9119H66.0956V20.119C65.7866 20.1042 65.4771 20.0919 65.1485 20.0919C64.8118 20.0919 64.4675 20.1043 64.1175 20.119V19.9119H64.1937C64.3509 19.9119 64.6195 19.8852 64.6195 19.7133C64.6195 19.6242 64.5575 19.439 64.4809 19.2185L64.2137 18.4219H62.6552L62.436 19.1366ZM63.4379 16.0938H63.4241L62.7855 18.0376H64.0689L63.4379 16.0938Z" fill="#211E1F"/>
<path d="M66.0934 20.1468C65.7843 20.133 65.4753 20.1187 65.1481 20.1187C64.8115 20.1187 64.4695 20.133 64.1181 20.1468L64.0871 20.1487V20.1177V19.8801H64.1172H64.1929C64.3519 19.8801 64.5881 19.8439 64.5881 19.7121C64.59 19.6339 64.5281 19.4454 64.4524 19.2268L64.1909 18.4502H62.6762L62.4629 19.1439C62.3933 19.3782 62.311 19.5597 62.3115 19.6716C62.3138 19.8392 62.5705 19.8801 62.7981 19.8801H62.9038V19.9111V20.1487L62.8729 20.1468C62.5981 20.133 62.3176 20.1187 62.0438 20.1187C61.7976 20.1187 61.5501 20.133 61.3039 20.1468L61.272 20.1487V20.1177V19.8801H61.3019H61.3429C61.5986 19.8792 61.812 19.734 61.911 19.4545L63.0105 16.3026C63.1006 16.0478 63.2244 15.7054 63.2839 15.4316C63.4991 15.3587 63.7748 15.2207 63.9072 15.1368C63.9263 15.1307 63.9454 15.1211 63.9735 15.1211C63.9901 15.1207 64.0272 15.1249 64.0492 15.1612C64.0687 15.2178 64.0901 15.2788 64.111 15.3345L65.3758 18.9265C65.4568 19.1674 65.5387 19.4212 65.6283 19.624C65.7078 19.8074 65.834 19.8793 66.0549 19.8802H66.1249V19.9112V20.1488L66.0934 20.1468ZM64.1471 20.0854C64.4872 20.0735 64.82 20.0601 65.1481 20.0601C65.4671 20.0601 65.7657 20.0735 66.0642 20.0854V19.942H66.0547C65.8195 19.9434 65.6571 19.8511 65.5728 19.6487C65.4833 19.4401 65.3995 19.1854 65.3191 18.9449L64.0547 15.3535C64.0338 15.2987 64.0138 15.2363 63.9957 15.1877C63.99 15.1811 63.9914 15.1811 63.9857 15.1811H63.9733C63.959 15.1811 63.9509 15.1854 63.9333 15.1901C63.8009 15.2763 63.5253 15.4111 63.3218 15.4649C63.2795 15.7249 63.1562 16.0677 63.0666 16.322L61.9676 19.4744C61.8629 19.7725 61.6224 19.9425 61.3429 19.942H61.3319V20.0854C61.5671 20.0735 61.8052 20.0601 62.0438 20.0601C62.309 20.0601 62.5805 20.0735 62.8424 20.0854V19.942H62.7981C62.5748 19.9391 62.2624 19.9139 62.2538 19.6715C62.2543 19.5344 62.3386 19.3587 62.4056 19.1268L62.4357 19.1358L62.4056 19.1258L62.6318 18.3915H64.2328L64.5085 19.2077C64.5857 19.4282 64.648 19.6111 64.648 19.712C64.6385 19.923 64.3485 19.9377 64.1928 19.942H64.1471L64.1471 20.0854ZM62.7434 18.0658L63.4009 16.0625H63.4238H63.4381H63.4586L64.1105 18.0658H62.7434ZM62.8257 18.0063H64.0276L63.4299 16.1658L62.8257 18.0063Z" fill="#211E1F"/>
<path d="M66.3976 15.6655C65.8823 15.6655 65.8619 15.7894 65.7584 16.2903H65.5522C65.5794 16.0984 65.6142 15.9065 65.6357 15.7065C65.6632 15.5141 65.6757 15.3226 65.6757 15.1236H65.8413C65.8961 15.3298 66.0685 15.3227 66.2528 15.3227H69.7971C69.9814 15.3227 70.1529 15.316 70.1671 15.1094L70.3314 15.137C70.3051 15.3227 70.2781 15.5079 70.2571 15.6936C70.2423 15.8789 70.2423 16.0646 70.2423 16.2493L70.0366 16.326C70.0237 16.0722 69.9895 15.6655 69.529 15.6655H68.4028V19.3198C68.4028 19.8493 68.6438 19.9099 68.9724 19.9099H69.1028V20.117C68.8352 20.117 68.3552 20.0899 67.9837 20.0899C67.5723 20.0899 67.0909 20.117 66.8233 20.117V19.9099H66.9533C67.3318 19.9099 67.5242 19.876 67.5242 19.3341V15.6655H66.3976Z" fill="#211E1F"/>
<path d="M69.1025 20.1496C68.8329 20.1496 68.352 20.122 67.9834 20.122C67.5729 20.122 67.0919 20.1496 66.8229 20.1496H66.7925V20.1206V19.8839H66.8229H66.9529C67.3314 19.8748 67.4834 19.8701 67.4929 19.3376L67.4919 15.6991H66.3972V15.6691V15.6386H67.5524V19.3376C67.5524 19.8886 67.33 19.9429 66.9529 19.9443H66.852V20.091C67.1238 20.0881 67.5848 20.0634 67.9834 20.0634C68.3419 20.0634 68.801 20.0882 69.0724 20.091V19.9443H68.971C68.6409 19.9429 68.3734 19.8634 68.3725 19.3234V15.6386H69.5286C69.9896 15.6405 70.05 16.0324 70.0629 16.2872L70.2129 16.2324C70.2129 16.0534 70.2134 15.8738 70.2267 15.6938C70.2458 15.5172 70.2714 15.341 70.2968 15.1657L70.1929 15.1481C70.1615 15.3481 69.9677 15.3591 69.7968 15.3562H66.2524H66.2177C66.0558 15.3581 65.8805 15.3486 65.8181 15.1557H65.7058C65.7038 15.3462 65.6909 15.531 65.6638 15.7138C65.6458 15.9029 65.6119 16.0848 65.5862 16.2653H65.7334C65.8243 15.7866 65.8839 15.6314 66.3972 15.6386V15.6691L66.3971 15.6991C65.8881 15.7077 65.8996 15.7938 65.7871 16.3015L65.7819 16.3248H65.7581H65.5171L65.5214 16.2905C65.5499 16.0967 65.5842 15.9052 65.6042 15.7066C65.6323 15.5147 65.6457 15.3243 65.6457 15.1271V15.0971H65.6752H65.8628L65.8685 15.1186C65.9166 15.2919 66.0418 15.2928 66.2176 15.2957L66.2523 15.2966H69.7967C69.9862 15.2929 70.1247 15.29 70.1366 15.111L70.1386 15.0781L70.1709 15.0848L70.3657 15.1153L70.3605 15.1453C70.3324 15.3291 70.3062 15.5148 70.2853 15.6991C70.2714 15.882 70.2714 16.0682 70.2714 16.2529V16.2744L70.252 16.282L70.0086 16.3706L70.0072 16.3305C69.9896 16.0725 69.9624 15.6991 69.5286 15.6991H68.432V19.3234C68.4391 19.8415 68.6443 19.8772 68.971 19.8838H69.1319V19.9134V20.1496L69.1025 20.1496Z" fill="#211E1F"/>
<path d="M70.5847 19.9114H70.681C70.929 19.9114 71.1885 19.8781 71.1885 19.5204V15.9223C71.1885 15.5642 70.929 15.5304 70.681 15.5304H70.5847V15.3242C70.8529 15.3242 71.2643 15.3514 71.6 15.3514C71.9447 15.3514 72.3567 15.3242 72.6795 15.3242V15.5304H72.5833C72.3362 15.5304 72.0743 15.5642 72.0743 15.9223V19.5204C72.0743 19.8781 72.3362 19.9114 72.5833 19.9114H72.6795V20.1186C72.3495 20.1186 71.9371 20.0914 71.5948 20.0914C71.2576 20.0914 70.8529 20.1186 70.5847 20.1186V19.9114Z" fill="#211E1F"/>
<path d="M72.6799 20.1497C72.348 20.1497 71.937 20.1216 71.5947 20.1216C71.2589 20.1216 70.8533 20.1497 70.5851 20.1497H70.5552V20.1207V19.9135V19.884H70.5851H70.6814C70.9294 19.8802 71.1571 19.8588 71.158 19.5226V15.9244C71.1571 15.5892 70.9294 15.5663 70.6814 15.5616H70.5552V15.5326V15.2969H70.5851C70.8533 15.2969 71.2657 15.3231 71.6004 15.3231C71.9428 15.3231 72.3547 15.2969 72.6799 15.2969H72.709V15.3264V15.5616H72.6799H72.5837C72.3327 15.5664 72.1075 15.5892 72.1042 15.9244V19.5226C72.1075 19.8588 72.3328 19.8802 72.5837 19.884H72.709V19.9135V20.1497H72.6799ZM72.649 20.0897V19.9444H72.5837C72.3375 19.9444 72.0461 19.9012 72.0461 19.5226V15.9244C72.0461 15.5449 72.3375 15.5021 72.5837 15.5021H72.649V15.3564C72.3318 15.3583 71.9352 15.383 71.6004 15.383C71.2751 15.383 70.8813 15.3583 70.6152 15.3564V15.5021H70.6814C70.9257 15.5021 71.2181 15.5449 71.219 15.9244V19.5226C71.218 19.9011 70.9257 19.9444 70.6814 19.9444H70.6152V20.0897C70.88 20.0868 71.2686 20.0635 71.5947 20.0635C71.9276 20.0635 72.3252 20.0883 72.649 20.0897Z" fill="#211E1F"/>
<path d="M75.4181 15.2227C76.8819 15.2227 78.0485 16.1303 78.0485 17.5927C78.0485 19.1727 76.9156 20.2227 75.4538 20.2227C73.9966 20.2227 72.8853 19.2336 72.8853 17.7569C72.8853 16.3288 73.99 15.2227 75.4181 15.2227ZM75.5219 19.9203C76.8542 19.9203 77.0862 18.745 77.0862 17.7436C77.0862 16.7398 76.5452 15.5246 75.4048 15.5246C74.2029 15.5246 73.8462 16.596 73.8462 17.5155C73.8462 18.745 74.4091 19.9203 75.5219 19.9203Z" fill="#211E1F"/>
<path d="M72.854 17.7557C72.8569 16.3109 73.975 15.1933 75.4173 15.1914V15.2214V15.2504C74.006 15.2504 72.9135 16.3424 72.9122 17.7556C72.9155 19.2156 74.0112 20.1899 75.4531 20.1904C76.9007 20.1899 78.0174 19.1547 78.0197 17.59C78.0183 16.1462 76.8692 15.2523 75.4174 15.2504V15.2214V15.1914C76.8926 15.1924 78.075 16.109 78.0779 17.59C78.0765 19.1866 76.9288 20.2476 75.4531 20.2504C73.9845 20.2475 72.8569 19.2485 72.8541 17.7556H72.854V17.7557ZM73.816 17.5143C73.8179 16.5905 74.1788 15.4924 75.4045 15.4924C76.5702 15.4953 77.1145 16.7334 77.1164 17.7424C77.1145 18.7438 76.8789 19.9476 75.5217 19.9476V19.9191V19.8895C76.8274 19.8876 77.0536 18.7438 77.0569 17.7424C77.0569 16.7467 76.5207 15.5548 75.4045 15.5533C74.2264 15.5547 73.8778 16.5995 73.8755 17.5143C73.8765 18.7376 74.4341 19.8866 75.5217 19.8895V19.9191V19.9476C74.3817 19.9462 73.8179 18.751 73.816 17.5143Z" fill="#211E1F"/>
<path d="M82.6764 18.7647L82.6902 18.7514V16.1762C82.6902 15.6124 82.2979 15.5305 82.0917 15.5305H81.9431V15.3242C82.265 15.3242 82.5807 15.3514 82.9026 15.3514C83.185 15.3514 83.4664 15.3242 83.7483 15.3242V15.5305H83.6445C83.3568 15.5305 83.0335 15.5852 83.0335 16.4024V19.5281C83.0335 19.7681 83.0402 20.0081 83.075 20.221H82.8145L79.2773 16.2786V19.1086C79.2773 19.7062 79.3935 19.9115 79.9221 19.9115H80.0397V20.1186C79.744 20.1186 79.4493 20.0915 79.154 20.0915C78.8449 20.0915 78.5283 20.1186 78.2192 20.1186V19.9115H78.3159C78.7907 19.9115 78.933 19.5895 78.933 19.0405V16.1476C78.933 15.7634 78.6187 15.5305 78.3087 15.5305H78.2192V15.3243C78.4801 15.3243 78.7482 15.3514 79.0088 15.3514C79.215 15.3514 79.4135 15.3243 79.6202 15.3243L82.6764 18.7647Z" fill="#211E1F"/>
<path d="M83.075 20.2525L82.7908 20.2425L79.3065 16.3583V19.1107C79.314 19.7078 79.405 19.8769 79.9207 19.8831H80.0693V19.914V20.1497H80.0393C79.7416 20.1497 79.4469 20.1221 79.1536 20.1221C78.8454 20.1221 78.5302 20.1497 78.2183 20.1497H78.1897V20.1202V19.8831H78.2183H78.3155C78.7683 19.8817 78.8983 19.5903 78.904 19.0426V16.1497C78.903 15.784 78.6035 15.5621 78.3083 15.5616H78.1897V15.5326V15.2969H78.2183C78.4816 15.2969 78.7492 15.3231 79.0083 15.3231C79.2121 15.3231 79.4102 15.2969 79.6426 15.3069L82.6597 18.7045V16.1788C82.6578 15.6322 82.2921 15.5664 82.0911 15.5617H81.9107V15.5327V15.297H81.9417C82.2649 15.297 82.5816 15.3232 82.9011 15.3232C83.183 15.3232 83.463 15.297 83.7478 15.297H83.7773V15.3264V15.5617H83.7478H83.6439C83.3615 15.5698 83.0692 15.5955 83.0635 16.4045V19.5298C83.0635 19.7698 83.0687 20.0093 83.1021 20.2193L83.1077 20.2526H83.075V20.2525ZM82.8142 20.1925H83.0389C83.0089 19.9864 83.0037 19.7578 83.0037 19.5297V16.4044C83.0037 15.5787 83.3499 15.504 83.6442 15.5016H83.7184V15.3564C83.4475 15.3583 83.1761 15.383 82.9014 15.383C82.5889 15.383 82.2817 15.3583 81.9708 15.3564V15.5016H82.0913C82.3042 15.504 82.7184 15.5978 82.7184 16.1787L82.7109 18.774L82.698 18.7883L82.6761 18.8102L79.6199 15.3564C79.4176 15.3564 79.217 15.3831 79.0085 15.3831C78.7556 15.3831 78.498 15.3583 78.248 15.3564V15.5016H78.3085C78.6309 15.504 78.9627 15.7474 78.9627 16.1497V19.0426C78.9627 19.5916 78.8095 19.9431 78.3156 19.945L78.248 19.9444V20.0897C78.5461 20.0883 78.8518 20.0635 79.1537 20.0635C79.4399 20.0635 79.7242 20.0883 80.0095 20.0897V19.945H79.9208C79.3819 19.9444 79.2471 19.7078 79.2471 19.1106V16.2035L82.8142 20.1925ZM82.6598 18.7535V18.7511L82.6541 18.7459L82.6598 18.7535Z" fill="#211E1F"/>
<path d="M84.8514 19.1366C84.7843 19.3695 84.7009 19.5495 84.7009 19.6719C84.7009 19.8785 84.99 19.9119 85.2153 19.9119H85.2919V20.119C85.0171 20.1042 84.7353 20.0919 84.4605 20.0919C84.2124 20.0919 83.9662 20.1043 83.72 20.119V19.9119H83.759C84.0281 19.9119 84.2557 19.7542 84.3572 19.4652L85.4572 16.3137C85.5457 16.0594 85.67 15.7161 85.7101 15.4614C85.93 15.3866 86.2043 15.2495 86.3362 15.1666C86.3557 15.1595 86.3695 15.1523 86.3905 15.1523C86.411 15.1523 86.4238 15.1523 86.4376 15.1738C86.4585 15.2281 86.4801 15.2904 86.5005 15.3452L87.7634 18.9376C87.8457 19.1776 87.9277 19.4314 88.0181 19.6381C88.1005 19.8304 88.2453 19.9119 88.471 19.9119H88.5129V20.119C88.2034 20.1042 87.8943 20.0919 87.5643 20.0919C87.2286 20.0919 86.8848 20.1043 86.5343 20.119V19.9119H86.6106C86.7672 19.9119 87.0367 19.8852 87.0367 19.7133C87.0367 19.6242 86.9743 19.439 86.8977 19.2185L86.631 18.4219H85.072L84.8514 19.1366ZM85.8552 16.0938H85.8414L85.2019 18.0376H86.4871L85.8552 16.0938Z" fill="#211E1F"/>
<path d="M88.51 20.1497C88.2009 20.1373 87.8924 20.1221 87.5643 20.1221C87.2295 20.1221 86.8857 20.1373 86.5352 20.1497L86.5048 20.1516V20.1202V19.884H86.5343H86.609C86.769 19.884 87.0057 19.8468 87.0062 19.7149C87.0076 19.6368 86.9457 19.4497 86.8691 19.2297L86.6081 18.453H85.0924L84.88 19.1468C84.8115 19.382 84.7295 19.5625 84.731 19.6735C84.731 19.8421 84.988 19.884 85.2153 19.884H85.32V19.9135V20.1516L85.2896 20.1497C85.0147 20.1373 84.7338 20.1221 84.4605 20.1221C84.2143 20.1221 83.9676 20.1373 83.72 20.1497L83.6899 20.1516V20.1202V19.884H83.72H83.759C84.0152 19.883 84.2295 19.7359 84.3295 19.4573L85.4286 16.3054C85.5162 16.0507 85.6399 15.7083 85.7009 15.4354C85.9167 15.3607 86.1923 15.2235 86.3257 15.1397C86.3437 15.1335 86.3624 15.1254 86.3904 15.1254C86.4086 15.1235 86.4437 15.1278 86.4657 15.1654C86.4861 15.2192 86.5061 15.2816 86.529 15.3373L87.7918 18.9292C87.8738 19.1702 87.9562 19.424 88.0452 19.6283C88.1256 19.8102 88.2509 19.8821 88.4699 19.884H88.5414V19.9135V20.1516L88.51 20.1497ZM86.5638 20.0892C86.9033 20.0763 87.2377 20.063 87.5643 20.063C87.8838 20.063 88.1834 20.0763 88.4824 20.0882L88.4814 19.9448H88.47C88.2376 19.9454 88.0753 19.8539 87.99 19.6516C87.8995 19.443 87.8177 19.1882 87.7357 18.9487L86.4718 15.3563C86.4514 15.3016 86.4305 15.2392 86.4138 15.1925C86.408 15.1839 86.4086 15.1839 86.4033 15.1839H86.3904C86.3762 15.1839 86.3685 15.1887 86.3518 15.1935C86.218 15.2778 85.9427 15.4148 85.7395 15.4678C85.697 15.7278 85.5723 16.0701 85.4838 16.3249L84.3843 19.4773C84.2799 19.7754 84.04 19.9454 83.759 19.9448H83.7489V20.0882C83.9852 20.0763 84.2213 20.063 84.4604 20.063C84.7266 20.063 84.9975 20.0763 85.2618 20.0882V19.9448H85.2152C84.9919 19.942 84.6785 19.9178 84.6705 19.6735C84.6718 19.5373 84.757 19.3625 84.8233 19.1297L84.8514 19.1387L84.8233 19.1287L85.0495 18.3944H86.6509L86.9261 19.2106C87.0018 19.4316 87.0642 19.6139 87.0642 19.7149C87.0542 19.9258 86.7661 19.9406 86.6089 19.9448H86.5637V20.0892H86.5638ZM85.1609 18.0683L85.8195 16.0654H85.8404H85.8552H85.8767L86.5257 18.0683H85.1609ZM85.2433 18.0092H86.4443L85.8471 16.1697L85.2433 18.0092Z" fill="#211E1F"/>
<path d="M90.2433 19.4452C90.2433 19.72 90.4338 19.8018 90.6538 19.8299C90.9352 19.8509 91.2443 19.8509 91.5615 19.8161C91.8491 19.7814 92.0967 19.6166 92.2195 19.4452C92.3291 19.2937 92.391 19.1014 92.4324 18.9504H92.6314C92.5562 19.3418 92.46 19.7276 92.3772 20.1185C91.7743 20.1185 91.1686 20.0914 90.5652 20.0914C89.96 20.0914 89.3567 20.1185 88.7524 20.1185V19.9113H88.8467C89.0953 19.9113 89.3639 19.878 89.3639 19.4518V15.9223C89.3639 15.5642 89.0952 15.5304 88.8467 15.5304H88.7524V15.3242C89.1153 15.3242 89.4729 15.3514 89.8362 15.3514C90.1876 15.3514 90.5305 15.3242 90.881 15.3242V15.5304H90.7081C90.4481 15.5304 90.2433 15.538 90.2433 15.9009V19.4452Z" fill="#211E1F"/>
<path d="M92.3774 20.1497C91.7722 20.1497 91.168 20.1221 90.5656 20.1221C89.9607 20.1221 89.3565 20.1497 88.7513 20.1497H88.7222V20.1202V19.884H88.7513H88.847C89.096 19.8783 89.3313 19.8611 89.3341 19.454V15.9231C89.3312 15.5893 89.0974 15.5664 88.847 15.5616H88.7222V15.5326V15.2969H88.7513C89.1165 15.2969 89.4741 15.3231 89.8369 15.3231C90.1855 15.3231 90.5284 15.2969 90.8812 15.2969H90.9094V15.3264V15.5616H90.8812H90.7089C90.4427 15.5692 90.277 15.5568 90.2717 15.9031V19.4474C90.2736 19.7031 90.4413 19.7721 90.6556 19.8021C90.777 19.8107 90.9041 19.8159 91.0366 19.8159C91.2046 19.8159 91.3794 19.8078 91.5566 19.7888C91.8365 19.756 92.0775 19.5945 92.1956 19.4307C92.3013 19.284 92.3623 19.0954 92.4032 18.9454L92.4094 18.9226H92.4322H92.668L92.6617 18.9588C92.5842 19.3517 92.4899 19.7355 92.4066 20.1264L92.4009 20.1498H92.3776H92.3774V20.1497ZM92.3526 20.0897C92.4322 19.7173 92.5222 19.353 92.596 18.9815H92.455C92.4122 19.1311 92.3512 19.3154 92.2432 19.4654C92.115 19.6434 91.8607 19.8111 91.5631 19.8477C91.3832 19.8663 91.205 19.8758 91.0365 19.8758C90.9036 19.8758 90.7746 19.8696 90.6503 19.861C90.427 19.8363 90.2103 19.741 90.2113 19.4473V15.903C90.2113 15.5215 90.4526 15.502 90.7088 15.502H90.8507V15.3563C90.5122 15.3582 90.1789 15.3834 89.8369 15.3834C89.4812 15.3834 89.1335 15.3582 88.7812 15.3563V15.502H88.8469C89.0922 15.502 89.3921 15.5449 89.3921 15.923V19.4539C89.3921 19.8982 89.0935 19.9444 88.8469 19.9444H88.7812V20.0896C89.375 20.0892 89.9688 20.0634 90.5655 20.0634C91.1622 20.0634 91.7585 20.0892 92.3526 20.0897Z" fill="#211E1F"/>
<path d="M92.5481 15.1289C92.9619 15.1289 93.2709 15.447 93.2709 15.8546C93.2709 16.2603 92.9619 16.5756 92.5481 16.5756C92.1342 16.5756 91.8247 16.2603 91.8247 15.8546C91.8247 15.447 92.1342 15.1289 92.5481 15.1289ZM92.5481 16.4408C92.8714 16.4408 93.12 16.1646 93.12 15.8546C93.12 15.5427 92.8752 15.2641 92.5481 15.2641C92.2229 15.2641 91.9742 15.5428 91.9742 15.8546C91.9742 16.1646 92.2229 16.4408 92.5481 16.4408ZM92.188 16.2356V16.1999C92.277 16.1875 92.2932 16.1903 92.2932 16.1351V15.5999C92.2932 15.5247 92.2851 15.499 92.1914 15.5027V15.466H92.5614C92.689 15.466 92.8056 15.5265 92.8056 15.658C92.8056 15.7656 92.7342 15.8451 92.6347 15.876L92.7532 16.0417C92.8089 16.117 92.8713 16.1875 92.9128 16.2122V16.2355H92.7719C92.7042 16.2355 92.6452 16.0931 92.5118 15.9022H92.4318V16.1427C92.4318 16.1903 92.4485 16.1874 92.5376 16.1998V16.2355L92.188 16.2356ZM92.4318 15.8546H92.5171C92.6104 15.8546 92.6542 15.7837 92.6542 15.6699C92.6542 15.5546 92.5866 15.5141 92.5123 15.5141H92.4318V15.8546Z" fill="#211E1F"/>
</g>
<defs>
<clipPath id="clip0_21817_22249">
<rect width="92.619" height="24" fill="white" transform="translate(0.651855)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

38
theme/packages/rtl/src/assets/images/front-pages/icon-discover.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

10
theme/packages/rtl/src/assets/images/front-pages/icon-facebook.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_21817_22409)">
<path d="M22 11C22 4.92422 17.0758 0 11 0C4.92422 0 0 4.92422 0 11C0 16.1562 3.55352 20.4875 8.34453 21.6777V14.3602H6.07578V11H8.34453V9.55195C8.34453 5.80938 10.0375 4.07344 13.7156 4.07344C14.4117 4.07344 15.6148 4.21094 16.109 4.34844V7.39062C15.8512 7.36484 15.4 7.34766 14.8371 7.34766C13.0324 7.34766 12.3363 8.03086 12.3363 9.80547V11H15.9285L15.3098 14.3602H12.332V21.9184C17.7805 21.2609 22 16.6246 22 11Z" fill="#5D7287"/>
</g>
<defs>
<clipPath id="clip0_21817_22409">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

1
theme/packages/rtl/src/assets/images/front-pages/icon-favorites.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><polygon fill="#f55376" points="37,6 11,6 11,30 24,36 37,42"/><polygon fill="#f55376" points="11,6 37,6 37,30 24,36 11,42"/><polygon fill="#eb0000" points="11,6 11,30 24,36 31.5,32.538 37,25 37,6"/><g><polygon fill="#fadb00" points="37,29.768 48,21 26,21"/><polygon fill="#fadb00" points="37,29.732 43.957,34 44,34 37,14 30,34 30.044,34"/><polygon fill="#f5bc00" points="39.45,21 34.55,21 32.685,26.329 36.974,29.748 37,29.732 37.026,29.748 41.315,26.329"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 555 B

4
theme/packages/rtl/src/assets/images/front-pages/icon-framework.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M22.7806 14.3438L14.8437 22.2806C14.7031 22.4212 14.5124 22.5001 14.3136 22.5001C14.1148 22.5001 13.9241 22.4212 13.7834 22.2806L4.46937 12.9694C4.32899 12.8288 4.25009 12.6383 4.25 12.4397V3.75H12.9397C13.1383 3.75009 13.3288 3.82899 13.4694 3.96938L22.7806 13.2806C22.8506 13.3503 22.9062 13.4331 22.9441 13.5244C22.982 13.6156 23.0015 13.7134 23.0015 13.8122C23.0015 13.911 22.982 14.0088 22.9441 14.1C22.9062 14.1912 22.8506 14.2741 22.7806 14.3438Z" fill="#5D87FF"/>
<path d="M23.3103 12.75L14 3.43969C13.8612 3.2998 13.696 3.18889 13.514 3.11341C13.332 3.03792 13.1368 2.99938 12.9397 3.00001H4.25001C4.0511 3.00001 3.86033 3.07903 3.71968 3.21968C3.57903 3.36033 3.50001 3.5511 3.50001 3.75001V12.4397C3.49938 12.6368 3.53792 12.832 3.61341 13.014C3.68889 13.196 3.7998 13.3612 3.93969 13.5L13.25 22.8103C13.3893 22.9496 13.5547 23.0602 13.7367 23.1356C13.9187 23.211 14.1138 23.2498 14.3108 23.2498C14.5078 23.2498 14.7029 23.211 14.8849 23.1356C15.0669 23.0602 15.2323 22.9496 15.3716 22.8103L23.3103 14.8716C23.4496 14.7323 23.5602 14.5669 23.6356 14.3849C23.711 14.2029 23.7498 14.0078 23.7498 13.8108C23.7498 13.6138 23.711 13.4187 23.6356 13.2367C23.5602 13.0547 23.4496 12.8893 23.3103 12.75ZM14.3103 21.75L5.00001 12.4397V4.50001H12.9397L22.25 13.8103L14.3103 21.75ZM9.50001 7.87501C9.50001 8.09751 9.43403 8.31502 9.31041 8.50002C9.18679 8.68503 9.01109 8.82922 8.80553 8.91437C8.59996 8.99952 8.37376 9.0218 8.15553 8.97839C7.9373 8.93498 7.73685 8.82784 7.57951 8.6705C7.42218 8.51317 7.31503 8.31271 7.27162 8.09448C7.22822 7.87626 7.25049 7.65006 7.33564 7.44449C7.42079 7.23892 7.56499 7.06322 7.74999 6.9396C7.935 6.81599 8.1525 6.75001 8.37501 6.75001C8.67338 6.75001 8.95952 6.86853 9.1705 7.07951C9.38148 7.29049 9.50001 7.57664 9.50001 7.87501Z" fill="#5D87FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

Some files were not shown because too many files have changed in this diff Show More