Skip to content

M
mySkill-x
Commit 2ef015f4 by Ooh-Ao
Options

41574 - เพิ่มหน้าใหม่ : หน้าตัวเลือก 12 module

parent 9b9632bc
Showing with 232 additions and 3 deletions
src/app/app-routing.module.ts
......@@ -8,6 +8,7 @@ import { CustomLayoutComponent } from './shared/layout-components/custom-layout/
import { ContentLayoutComponent } from './shared/layout-components/content-layout/content-layout.component';
import { Pages } from './shared/routes/content-routes';
import { Error404Component } from './components/authentication/errorpages/error404/error404.component';
import { MySkillXModuleComponent } from './components/my-skill-x-module/my-skill-x-module.component';
const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
......@@ -25,6 +26,7 @@ const routes: Routes = [
},
{ path: '', component: CustomLayoutComponent, children: COUNTENT_ROUTES },
{ path: '', component: ContentLayoutComponent, children: Pages },
{ path: 'myskill-x-home', component: MySkillXModuleComponent},
{ path: '**', component: Error404Component },
];
......
src/app/authentication/login-page/login-page.component.ts
......@@ -114,7 +114,7 @@ export class LoginPageComponent {
this.tokenService.saveUser(this.decodeJWT(response.accessToken))
this.employeeService.getProfile().subscribe(result => {
this.tokenService.saveUserData(result)
this.router.navigate(['/self-evaluation']);
this.router.navigate(['/myskill-x-home']);
})
} else {
......
src/app/components/my-skill-x-module/my-skill-x-module.component.html
<!-- header ------------------------------------------------------------>
<app-header></app-header>
<header class="flex flex-col items-center gap-3 text-center mt-5rem">
<!-- โลโก้ -->
<img src="./assets/img/brand-logos/mySkill-XXX-h190.PNG"
alt="mySkillX"
class="h-32 w-auto" />
<!-- บรรทัดใหญ่ -->
<h1 class="max-w-[900px] text-2xl sm:text-3xl font-bold text-gray-900">
My Skill Platform <span class="text-red-600">One X</span>:
Overall Network Employee <span class="text-red-600">Xtra</span>
</h1>
<!-- บรรทัดย่อย -->
<h2 class="text-xl sm:text-2xl font-bold text-gray-700">
HR Master Blueprint
</h2>
</header>
<!-- blueprint cards --------------------------------------------------->
<section class="mx-auto mt-10 grid gap-10 xl:gap-14 lg:grid-cols-2 max-w-[1400px]">
<!-- HRD One X ------------------------------------------------------->
<div class="bp-card bp-glow">
<div class="bp-head">
<h3 class="bp-title">HRD One X</h3>
<p class="bp-sub">Human Resource Development</p>
</div>
<div class="bp-grid">
<ng-container *ngFor="let m of hrdModules">
<div class="module-card">
<img [src]="m.icon"
[alt]="m.title + ' icon'"
class="module-img"/>
<p class="module-label">
<span class="font-semibold text-sky-600">One X</span><br />
{{ m.title }}
</p>
<i class="ti ti-arrow-right module-arrow"></i>
</div>
</ng-container>
</div>
</div>
<!-- HRM One X ------------------------------------------------------->
<div class="bp-card bp-card--blue bp-glow">
<div class="bp-head">
<h3 class="bp-title">HRM One X</h3>
<p class="bp-sub">Human Resource Management</p>
</div>
<div class="bp-grid">
<ng-container *ngFor="let m of hrmModules">
<div class="module-card">
<img [src]="m.icon"
[alt]="m.title + ' icon'"
class="module-img"/>
<p class="module-label">
<span class="font-semibold text-sky-600">One X</span><br />
{{ m.title }}
</p>
<i class="ti ti-arrow-right module-arrow"></i>
</div>
</ng-container>
</div>
</div>
</section>
<!-- eco-system pill --------------------------------------------------->
<div class="eco-pill bp-glow mx-auto mt-5">
Eco system <span class="font-semibold">myHR</span>
</div>
src/app/components/my-skill-x-module/my-skill-x-module.component.scss
/* ---------- Theme Variables ---------- */
$radius-card : 28px;
$radius-module : 20px;
$radius-pill : 36px;
$dur : .35s;
$easing : cubic-bezier(.4, 0, .2, 1);
$clr-slate-50 : #f8fafc;
$clr-slate-700 : #334155;
$shadow-xs : 0 3px 6px rgba(0,0,0,.05);
$shadow-base : 0 12px 25px -8px rgba(0,0,0,.12);
$shadow-deep : 0 18px 38px -12px rgba(0,0,0,.18);
/* ---------- Utility Glow (around main blocks) ---------- */
.bp-glow {
position: relative;
&::before {
content : '';
position: absolute;
inset : -2px; /* tiny bleed */
z-index : -1;
border-radius: inherit;
background: linear-gradient(135deg,#4f46e5,#ec4899 60%,#f59e0b 100%);
filter : blur(28px);
opacity : .18;
transition: opacity $dur ease;
}
&:hover::before { opacity: .27; }
}
/* ========== Blueprint Card ========== */
.bp-card {
border-radius: $radius-card;
background : #ffffff;
box-shadow : $shadow-base;
padding : 2rem 1.75rem;
display : flex;
flex-direction: column;
gap : 1.75rem;
transition : transform $dur $easing, box-shadow $dur $easing;
&:hover {
transform : translateY(-6px);
box-shadow: $shadow-deep;
}
&--blue { background: #e8f0ff; }
}
/* ---------- Header inside card ---------- */
.bp-head { display:flex; flex-direction:column; gap:.3rem; }
.bp-title{ font: 800 1.25rem/1.3 'Inter',sans-serif; color:#1e293b; }
.bp-sub { font-size:.9rem; color:#64748b; }
/* ---------- Grid auto-fill responsive ---------- */
.bp-grid {
display:grid;
gap:1.2rem;
grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
}
/* ========== Module Card (Glass-tilt) ========== */
.module-card {
position:relative;
border-radius:$radius-module;
padding:1.2rem 1rem 1.5rem;
display:flex; flex-direction:column; gap:.6rem;
cursor:pointer;
background:$clr-slate-50;
box-shadow:$shadow-xs;
transition:transform $dur $easing,box-shadow $dur $easing,background $dur;
/* glass overlay */
&.module-glass {
background:rgba(255,255,255,.55);
backdrop-filter:blur(8px) saturate(180%);
}
&:hover{
transform:translateY(-5px) rotateX(4deg) rotateY(-2deg);
box-shadow:$shadow-base;
background:#ffffff;
}
}
.module-emoji { font-size:2rem; }
.module-label { font-size:.9rem; line-height:1.2rem; color:$clr-slate-700; }
/* arrow */
.module-arrow{
position:absolute; right:1rem; bottom:1rem;
font-size:1rem; color:#a1a1aa; opacity:0;
transition:opacity $dur $easing, transform $dur $easing;
}
.module-card:hover .module-arrow{ opacity:1; transform:translateX(4px); }
/* ========== Eco-Pill ========== */
.eco-pill{
border-radius:$radius-pill;
background:#ffffff;
padding:1.7rem 4rem;
font:600 1.15rem 'Inter',sans-serif;
color:$clr-slate-700;
box-shadow:$shadow-base;
transition:transform $dur $easing, box-shadow $dur $easing;
&:hover{
transform:translateY(-6px);
box-shadow:$shadow-deep;
}
}
/* ---------- Media tweaks ---------- */
@media (max-width:640px){
.bp-title{ font-size:1.1rem; }
.bp-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
.module-emoji{ font-size:1.6rem; }
.eco-pill{ font-size:1rem; padding:1.4rem 3rem; }
}
.module-img {
width : 42px; /* ปรับตามดีไซน์ */
height: 42px;
object-fit: contain; /* ให้ไม่ยืดผิดสัดส่วน */
filter: drop-shadow(0 1px 3px rgba(0,0,0,.08));
transition: transform .35s;
/* scale เล็กน้อยตอน hover */
.module-card:hover & { transform: scale(1.08); }
}
src/app/components/my-skill-x-module/my-skill-x-module.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
type ModuleCard = { icon: string; title: string };
@Component({
selector: 'app-my-skill-x-module',
templateUrl: './my-skill-x-module.component.html',
styleUrls: ['./my-skill-x-module.component.scss']
})
export class MySkillXModuleComponent {}
export class MySkillXModuleComponent {
hrdModules: ModuleCard[] = [
{ icon: 'assets/img/logos/HRD/1.png', title: 'Performance & Competency' },
{ icon: 'assets/img/logos/HRD/2.png', title: 'On-Boarding Program' },
{ icon: 'assets/img/logos/HRD/3.png', title: 'Talent & Successor' },
{ icon: 'assets/img/logos/HRD/4.png', title: 'Career Path' },
{ icon: 'assets/img/logos/HRD/5.png', title: 'Training Roadmap' },
{ icon: 'assets/img/logos/HRD/6.png', title: 'Leadership' }
];
hrmModules: ModuleCard[] = [
{ icon: 'assets/img/logos/HDM/1.png', title: 'Workforce' },
{ icon: 'assets/img/logos/HDM/2.png', title: 'Compensation' },
{ icon: 'assets/img/logos/HDM/3.png', title: 'Salary Survey' },
{ icon: 'assets/img/logos/HDM/4.png', title: 'Recruit & Selection' },
{ icon: 'assets/img/logos/HDM/5.png', title: 'JD & Org Chart' },
{ icon: 'assets/img/logos/HDM/6.png', title: 'Welfare & Reward' }
];
}
src/assets/img/logos/HRD/2.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment