feat: update UI text and structure for improved user experience and localization
This commit is contained in:
Marek Lesko
@@ -5,6 +5,8 @@
|
||||
width: 100%;
|
||||
background-color: var(--mat-sys-background) !important;
|
||||
z-index: 9;
|
||||
-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,9 +19,7 @@
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
|
||||
.profileTabs {
|
||||
|
||||
.mat-mdc-tab {
|
||||
padding: 30px 16px;
|
||||
height: auto;
|
||||
@@ -34,7 +34,6 @@
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home-page .expansion-panel .mat-expansion-panel-body {
|
||||
@@ -65,7 +64,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing-top-bottom {
|
||||
padding: 80px 0;
|
||||
}
|
||||
@@ -140,4 +138,4 @@
|
||||
.footer-content .left-side-content {
|
||||
padding: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,71 +4,40 @@
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
<div class="align-items-center justify-content-center img-height d-none d-lg-flex">
|
||||
<img src="/assets/images/backgrounds/login-bg.svg" alt="login" style="max-width: 500px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100">
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9 max-width-form">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Your Admin Dashboard</span
|
||||
>
|
||||
<h4 class="f-w-700 f-s-24 m-0">Vitajte!</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8">Váš uživateľský prístup</span>
|
||||
|
||||
<div class="row m-t-24">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="row m-t-24 align-items-center">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
|
||||
Prihlásiť sa pomocou Google
|
||||
</div>
|
||||
</button>
|
||||
<!-- <div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
<img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
<!-- <div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Username</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@@ -81,15 +50,9 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<!-- password
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@@ -102,37 +65,23 @@
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary"
|
||||
>Remember this Device</mat-checkbox
|
||||
>
|
||||
<a
|
||||
[routerLink]="['/authentication/side-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
||||
>Forgot Password ?</a
|
||||
>
|
||||
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
||||
<a [routerLink]="['/authentication/side-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password ?</a>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
<button mat-flat-button color="primary" class="w-100" [disabled]="!form.valid">
|
||||
Sign In
|
||||
</button>
|
||||
<!-- input -->
|
||||
<!-- input
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block m-t-24"
|
||||
>New to Modernize?
|
||||
<a
|
||||
[routerLink]="['/authentication/side-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Create an account</a
|
||||
>
|
||||
</span>
|
||||
<span class="d-block f-w-500 d-block m-t-24">New to Modernize?
|
||||
<a [routerLink]="['/authentication/side-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14">
|
||||
Create an account</a>
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -636,29 +636,32 @@ export const followercardThird: followercards[] = [
|
||||
|
||||
export const topcardsGrid = [
|
||||
{
|
||||
key: 1, title: 'Personalizácia podpory pomocou umelej inteligencie (AI)', subtitle: 'Obsah a aktivity sa adaptujú na tempo a pokrok každého.',
|
||||
key: 1,
|
||||
title: 'Hlavné prínosy',
|
||||
subtitle: '<ul><li>Personalizácia podpory pomocou umelej inteligencie (AI) – obsah a aktivity sa adaptujú na tempo a pokrok každého používateľa </li><li>Podpora samostatnosti cez IoT – prepojené zariadenia uľahčujú každodenné fungovanie </li><li>Rozhodovanie na základe dát – prehľadné reporty a analýzy optimalizujú intervencie </li><li>Dostupnosť kdekoľvek – online prístup znižuje regionálne rozdiely v dostupnosti služieb </li><li>Škálovateľnosť a prenositeľnosť – riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah</li></ul>',
|
||||
img: '/assets/images/svgs/icon-briefcase.svg', color: 'warning'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
title: 'Podpora samostatnosti cez IoT', subtitle: 'Prepojené zariadenia uľahčujú každodenné fungovanie.',
|
||||
title: 'Ako to funguje',
|
||||
subtitle: '<ul><li>Hodnotenie a ciele: Systém pomáha definovať ciele podpory a priebežne vyhodnocuje pokrok </li><li>Adaptívny obsah: Modul AI prispôsobuje odporúčania a cvičenia podľa potrieb používateľa </li><li>IoT integrácie: Zariadenia monitorujú a podporujú denné rutiny, bezpečnosť a samostatnosť </li><li>Analytické reporty: Pre odborníkov a rodiny prinášajú prehľadné výstupy pre lepšie rozhodovanie</li></ul>',
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg', color: 'secondary', imgMain: '/assets/images/landingpage/background/feature-apps.png',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
title: 'Rozhodovanie na základe dát', subtitle: 'Prehľadné reporty a analýzy optimalizujú intervencie',
|
||||
title: 'Míľniky a kvalita', subtitle: '<ul><li>Hodnotenie dopadov, analýza dát a návrhy aktualizácií zabezpečujú dlhodobú udržateľnosť a efektivitu</li><li>Pravdepodobnosť dosiahnutia kľúčového míľnika je vysoká vďaka implementácii nástrojov na analýzu a monitorovanie; alokovaný rozpočet na tento míľnik je 75 680 € </li></ul>',
|
||||
img: '/assets/images/front-pages/logoIcon.svg', color: 'primary', imgMain: '/assets/images/landingpage/background/screen1.png'
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
title: 'Dostupnosť kdekoľvek', subtitle: 'Online prístup znižuje regionálne rozdiely v dostupnosti služieb.',
|
||||
title: 'Pre koho je projekt určený', subtitle: '<ul><li>Osoby s PAS a ich rodiny</li><li>Školy a špeciálni pedagógovia</li><li>Poskytovatelia sociálnych služieb</li><li>Klinickí odborníci a terapeuti</li><li>Samosprávy a tvorcovia politík</li></ul>',
|
||||
img: '/assets/images/front-pages/icon-speech-bubble.svg', color: 'success'
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
title: 'Škálovateľnosť a prenositeľnosť', subtitle: 'Riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah.',
|
||||
img: '/assets/images/front-pages/icon-favorites.svg', color: 'error'
|
||||
},
|
||||
// {
|
||||
// key: 5,
|
||||
// title: 'Škálovateľnosť a prenositeľnosť', subtitle: 'Riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah.',
|
||||
// img: '/assets/images/front-pages/icon-favorites.svg', color: 'error'
|
||||
// },
|
||||
];
|
||||
|
||||
export const setupCards: setupCards[] = [
|
||||
|
||||
@@ -89,8 +89,6 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="f-s-40 lh-lg section-sub-title text-center">Hlavné prínosy</h2>
|
||||
|
||||
|
||||
<!--new-->
|
||||
<!-- DESKTOP VIEW -->
|
||||
@@ -101,11 +99,11 @@
|
||||
<div class="col-md-4">
|
||||
<div>
|
||||
<!-- @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 class="shadow-none text-justify rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-44">
|
||||
<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>
|
||||
<div class="text-center"><img [src]="topcard.img" alt="icon" width="40" /></div>
|
||||
<h6 class="f-s-16 m-t-16 text-center">{{ topcard.title }}</h6>
|
||||
<p class="f-s-14 m-t-16" [innerHTML]="topcard.subtitle"></p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- } -->
|
||||
@@ -157,17 +155,11 @@
|
||||
<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 class="shadow-none text-justify 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" />
|
||||
}
|
||||
<div class="text-center"><img [src]="topcard.img" alt="icon" width="40" /></div>
|
||||
<h6 class="f-s-16 m-t-16 text-center">{{ topcard.title }}</h6>
|
||||
<div class="f-s-14 m-t-16 text-justify" [innerHTML]="topcard.subtitle"></div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
@@ -230,7 +222,7 @@
|
||||
|
||||
<!-- Tab content shown BELOW the tab group -->
|
||||
|
||||
<div class="row tab-header-content p-y-66 align-items-center">
|
||||
<!-- <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" />
|
||||
@@ -242,7 +234,7 @@
|
||||
<h2 class="f-s-40 lh-lg section-sub-title">Defend your focus</h2>
|
||||
<div class="m-y-30">
|
||||
<mat-accordion multi>
|
||||
<!-- Panel 0 -->
|
||||
Panel 0
|
||||
<mat-expansion-panel #panel0 [expanded]="selectedIndex === 0 || selectedIndex === 3" hideToggle
|
||||
class="expansion-panel">
|
||||
<mat-expansion-panel-header>
|
||||
@@ -259,7 +251,7 @@
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<!-- Panel 1 -->
|
||||
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">
|
||||
@@ -275,7 +267,7 @@
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<!-- Panel 2 & 3 merged -->
|
||||
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">
|
||||
@@ -298,13 +290,13 @@
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-leadership spacing-top p-b-48">
|
||||
<!-- <div class="our-leadership spacing-top p-b-48">
|
||||
<app-image-slider></app-image-slider>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="toolBar bg-primary p-y-16">
|
||||
<div class="container">
|
||||
@@ -322,280 +314,11 @@
|
||||
</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> </div>
|
||||
|
||||
<div class="footer">
|
||||
<div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -7,9 +7,7 @@
|
||||
}
|
||||
|
||||
.home-page-header {
|
||||
|
||||
.header-container-content {
|
||||
|
||||
.cardPosition {
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
@@ -17,7 +15,6 @@
|
||||
}
|
||||
|
||||
.cardPositionTwo {
|
||||
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
}
|
||||
@@ -43,9 +40,7 @@
|
||||
}
|
||||
|
||||
.dashboardCards {
|
||||
|
||||
.card-container {
|
||||
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
@@ -64,7 +59,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-slider {
|
||||
@@ -78,7 +72,6 @@
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
.cardWithShadow {
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
@@ -146,10 +139,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatUpDown {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
@@ -180,10 +175,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.home-page-header {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,27 +46,27 @@
|
||||
<mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
|
||||
|
||||
<div class="">
|
||||
<div class="branding">
|
||||
<div class="branding" (click)="close()">
|
||||
<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/portfolio']"
|
||||
[class.selected]="isActiveRoute('portfolio')">
|
||||
[class.selected]="isActiveRoute('portfolio')" (click)="close()">
|
||||
Novinky
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark" [class.selected]="isActiveRoute('blog')"
|
||||
[routerLink]="['/front-pages/blog']">
|
||||
[routerLink]="['/front-pages/blog']" (click)="close()">
|
||||
Blog
|
||||
<span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
New
|
||||
Nové
|
||||
</span>
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
|
||||
[routerLink]="['/front-pages/contact']">
|
||||
[routerLink]="['/front-pages/contact']" (click)="close()">
|
||||
Kontakty
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem" class="w-100">
|
||||
|
||||
@@ -34,6 +34,11 @@ export class HomepageComponent {
|
||||
this.closeSidenavIfNeeded();
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.customizerRight.close();
|
||||
}
|
||||
|
||||
closeSidenavIfNeeded() {
|
||||
if (!this.isMobileView && this.customizerRight?.opened) {
|
||||
this.customizerRight.close();
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<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>
|
||||
<h5 class="f-w-500 f-s-20">Novinky</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>
|
||||
@@ -20,7 +20,7 @@
|
||||
<!-- 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()" />
|
||||
<input matInput placeholder="Vyhľadať" [(ngModel)]="searchText" (input)="onSearchChange()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -32,6 +32,9 @@
|
||||
</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">
|
||||
<mat-chip class="m-y-16 bg-light">{{
|
||||
productcard.claim
|
||||
}}</mat-chip>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<!-- Left Side: Text Content -->
|
||||
<div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { productcards } from '../front-pagesData';
|
||||
import { newscards } from '../front-pagesData';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
@@ -16,7 +16,7 @@ import { FormsModule } from '@angular/forms';
|
||||
})
|
||||
export class PortfolioComponent implements OnInit {
|
||||
|
||||
filteredCards = productcards;
|
||||
filteredCards = newscards;
|
||||
|
||||
searchText: string = '';
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Modernize Angular 20 Admin Template</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
|
||||
Reference in New Issue
Block a user