updated 9-9-2025

This commit is contained in:
2025-09-09 08:32:58 +07:00
parent 732f41595e
commit e44fe5dcf8
15 changed files with 698 additions and 169 deletions

View File

@ -98,14 +98,6 @@
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="wwwroot\font\atgfont-Regular.woff">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="wwwroot\font\atgfont-Regular.woff2">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="wwwroot\font\ATGIcon-Regular.woff">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>

View File

@ -45,7 +45,6 @@ namespace AppLibs.Libs
public IHtmlContent ToFlexPageAttribute()
{
Console.WriteLine(IsFlexPage.ToString());
if (IsFlexPage.HasValue && IsFlexPage.Value)
{

View File

@ -0,0 +1,13 @@
{
"version": 1,
"isRoot": true,
"tools": {
"dotnet-ef": {
"version": "9.0.8",
"commands": [
"dotnet-ef"
],
"rollForward": false
}
}
}

View File

@ -1,13 +1,31 @@
using AppLibs.Libs;
using AppLibs.Libs;
using Microsoft.AspNetCore.HttpOverrides;
using Microsoft.AspNetCore.Server.Kestrel.Core;
await WSNavigation.LoadJson();
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
#if (!DEBUG)
builder.Services.Configure<ForwardedHeadersOptions>(options =>
{
options.ForwardedHeaders =
ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
// Nếu muốn an toàn hơn, chỉ trust proxy cụ thể:
// options.KnownProxies.Add(IPAddress.Parse("127.0.0.1"));
});
builder.WebHost.UseKestrel(o =>
{
o.ListenAnyIP(5111, lo =>
{
lo.Protocols = HttpProtocols.Http1;
});
});
builder.Services.AddControllersWithViews();
#else
builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();
#endif
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
@ -15,7 +33,13 @@ if (!app.Environment.IsDevelopment())
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseForwardedHeaders();
app.Use(async (ctx, next) =>
{
Console.WriteLine("X-Forwarded-Proto: " + ctx.Request.Headers["X-Forwarded-Proto"]);
Console.WriteLine("Scheme: " + ctx.Request.Scheme);
await next();
});
app.UseHttpsRedirection();
app.UseRouting();

View File

@ -48,32 +48,30 @@
</div>
<section>
<div class="con">
<div class="r-n-g">
<div class="r con-feature j-c-center">
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-trusted"></i>
<h3>
Trusted Air Partner
</h3>
<p>Safe, reliable air cargo booking and shipping, ensuring secure, timely, and cost-effective delivery</p>
</div>
<div class="r con-feature j-c-center">
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-trusted"></i>
<h3>
Trusted Air Partner
</h3>
<p>Safe, reliable air cargo booking and shipping, ensuring secure, timely, and cost-effective delivery</p>
</div>
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-air-cargo"></i>
<h3>
Professional Booking & Live Tracking
</h3>
<p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p>
</div>
</div>
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-air-cargo"></i>
<h3>
Professional Booking & Live Tracking
</h3>
<p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p>
</div>
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-support"></i>
<h3>Dedicated Customer Care</h3>
<p>Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation</p>
</div>
</div>
<div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-support"></i>
<h3>Dedicated Customer Care</h3>
<p>Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation</p>
</div>
</div>
</div>
@ -83,7 +81,7 @@
<section class="con section about-section">
<div class="r a-i-center">
<div class="c-m-12 c-l-6">
<div class="c-12 c-l-6">
<div class="about-image-box mr-0 mr-x-5">
<div class="about-image1 d-n d-x-b">
<img class="w-100" src="~/images/1000/about-section/cargoload.png" alt="">
@ -96,24 +94,24 @@
</div>
</div>
<div class="c-m-12 c-l-6 pl-5 pr-2">
<div class="c-12 c-l-6 block-about">
<span class="sub-title">About Our Company</span>
<h2 class="title mb-3">Trusted Logistic Service Provider</h2>
<ul class="order-list primary-color mrb-40">
<li>revolutionary catalysts for chang</li>
<li>catalysts for chang the Seamlessly</li>
<li>business applications through</li>
<li>procedures whereas processes</li>
<ul class="order-list mb-4">
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i> revolutionary catalysts for chang</li>
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>catalysts for chang the Seamlessly</li>
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>business applications through</li>
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>procedures whereas processes</li>
</ul>
<p class="mrb-40">Distinctively exploit optimal alignments for intuitive business applications through revolutionary catalysts for chang the Seamlessly optimal optimal alignments for intuitive.</p>
<p class="desc mb-4">Distinctively exploit optimal alignments for intuitive business applications through revolutionary catalysts for chang the Seamlessly optimal optimal alignments for intuitive.</p>
<div class="d-inline d-md-flex align-items-center mt-40">
<div class="d-f a-i-center mt-4">
<a href="?page_id=120" class="animate-btn mrr-50 mrb-sm-30">Read More</a>
<button class="btn btn-primary mr-5">Read More</button>
<div class="signature">
<img decoding="async" src="https://shtheme.org/demosd/logistek/wp-content/uploads/2021/04/signature.png" alt="">
@ -125,62 +123,187 @@
</div>
</section>
<!-- Hero Section -->
<section class="pt-5 pb-5">
<div class="con">
<div class="r j-c-center">
<div class="c-12 c-m-10 text-center">
<h1 class="mb-3">Welcome to Aviationaly</h1>
<p class="mb-4">Start your aviation journey with professional instructors and top-notch facilities.</p>
<button class="p-2 bg-white">Get Started</button>
<section class="con-parallax con-perf-section">
<div class="bg-wrapper parallax" data-dept="0.4" >
<img src="/images/1000/passenger-planes.jpg" alt="Background" class="bg-img">
</div>
<div class="con perf-section section-break" data-content>
<div class="r">
<div class="r-n-g w-n w-s-100">
<div class="c-6 c-l-3">
<div class="d-f f-c a-i-center grid">
<div class="icon-wrap d-f j-c-center a-i-center">
<i class="atg a-8x atg-air-cargo"></i>
</div>
<span>Cargo Tonnage</span>
<h1 CountNumber prefix="+" num-max="100000" num-min="1">0</h1>
</div>
</div>
<div class="c-6 c-l-3">
<div class="d-f f-c a-i-center grid">
<div class="icon-wrap d-f j-c-center a-i-center">
<i class="atg a-8x atg-client"></i>
</div>
<span>
Satisfied Clients
</span>
<h1 CountNumber prefix="+" num-max="1000" num-min="1">+0</h1>
</div>
</div>
<div class="c-6 c-l-3">
<div class="d-f f-c a-i-center grid">
<div class="icon-wrap d-f j-c-center a-i-center">
<i class="atg a-8x atg-ticket-air-thin"></i>
</div>
<span>
Ticket Sales
</span>
<h1 CountNumber num-max="20000" num-min="1">0</h1>
</div>
</div>
<div class="c-6 c-l-3">
<div class="d-f f-c a-i-center grid">
<div class="icon-wrap d-f j-c-center a-i-center">
<i class="atg a-8x atg-revenue"></i>
</div>
<span>
Annual Revenue
</span>
<h1 CountNumber prefix="$" num-max="10000000" num-min="1">$0</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cert-section section">
<div class="con block1">
<div class="r">
<div class="c-s-12 c-m-6 pr-0 pr-m-5">
<span class="sub-title">Certified & Trusted Logistics Provider</span>
<h2>Our Prestigious Certifications and Awards</h2>
</div>
<div class="c-s-12 c-m-6">
<p class="desc pl-5">
We take great pride in our unwavering commitment to the highest standards of quality, safety, and operational excellence. The following certifications and international memberships highlight and recognize our outstanding performance and reliability in providing world-class logistics services
</p>
</div>
</div>
</div>
</section>
<div class="con block2">
<div class="r">
<div class="block-content r-n-g a-i-end">
<div class="c-12 c-m-6">
<div class="r-n-g">
<div class="c-12 c-s-6 c-m-12 c-x-6">
<div class="grid d-f f-c">
<i class="atg a-5x atg-cert mb-3"></i>
<h3 class="title">
IATA GSSA Certified Company
</h3>
<p>
Officially recognized by the International Air Transport Association as a General Sales & Service Agent
</p>
</div>
<!-- Features Section -->
<!-- Courses Section -->
<section class="pt-5 pb-5">
<div class="con">
<div class="r j-c-center">
<div class="c-12 text-center">
<h2 class="mb-3">Our Programs</h2>
</div>
<div class="r gap-3">
<div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Private Pilot License</h4>
<p>Learn the fundamentals of flying and become a licensed pilot.</p>
</div>
<div class="c-12 c-s-6 c-m-12 c-x-6">
<div class="grid d-f f-c">
<i class="atg a-5x atg-cup mb-3"></i>
<h3 class="title">
Member of TIACA - FEDAGSA
</h3>
<p>
Proud member of leading global cargo and air logistics associations
</p>
</div>
</div>
</div>
</div>
<div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Commercial Pilot License</h4>
<p>Advance your skills and prepare for a professional aviation career.</p>
</div>
<div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Flight Instructor Course</h4>
<p>Teach others how to fly and build flight hours simultaneously.</p>
<div class="c-12 c-m-6">
<div class="grid-image">
<img class="w-100 feather-img" src="~/images/1000/cert-section/cGSSA.jpg" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="our-section section">
<div class="con block1">
<div class="r">
<div class="c-l-5">
<div class="d-f f-c a-i-end">
<span class="sub-title">All Our Services</span>
<h2>
Service We Offer
</h2>
</div>
</div>
<div class="c-l-1 pl-3 pr-3 j-c-center d-f "><div class="sep"></div> </div>
<div class="c-l-5">
<p class="desc">orem ipsum dolor sit amet, consectetur adipisicing elit. Eos aperiam porro reiciendis dolore doloribus repellendus tempora vitae quia voluptas ipsum eligend.</p>
</div>
</div>
</div>
<div class="con block2">
<div class="r">
<div class="r-n-g">
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-airline a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<!-- Testimonials Section -->
<section class="pt-5 pb-5 bg-white">
<a class="mt-3" href="">Read More</a>
</div>
</div>
</div>
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-ticket-air a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<a class="mt-3" href="">Read More</a>
</div>
</div>
</div>
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-warehouse a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<a class="mt-3" href="">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="con">
<div class="r j-c-center">
<div class="c-12 text-center">
<h2 class="mb-3">What Students Say</h2>
</div>
<div class="r gap-3">
<div class="c-12 c-s-6 c-m-6">
<p class="mb-1">"Great instructors and hands-on training. I got my PPL in no time!"</p>
<strong>- Alex T.</strong>
</div>
<div class="c-12 c-s-6 c-m-6">
<p class="mb-1">"Modern facilities and friendly staff. Highly recommended!"</p>
<strong>- Maria L.</strong>
</div>
</div>
<div class="r j-c-center mt-2 mb-5">
<h3 class="d-f-i f-wrap j-c-center">Do You Want To explore more services just <a href="" class="text-primary-color ml-2">click here</a></h3>
</div>
</div>
</section>
@ -201,10 +324,10 @@
</div>
</div>
</section>
<section class="con section">
<section class="con section blog-section">
<div class="r j-c-center">
<div class="d-f f-c a-i-center">
<div class="sub-title">BLOG POST</div>
<div class="sub-title">Blog Post</div>
<h2 class="title">Our Latest Blog Post</h2>
<div class="container">
<div class="line"></div>

View File

@ -346,4 +346,44 @@
.atg-message:before {
content: '\a048'
}
.atg-radiobutton:before {
content: '\a049'
}
.atg-cert:before {
content: '\a04a'
}
.atg-cup:before {
content: '\a04b'
}
.atg-airline:before {
content: '\a04c'
}
.atg-ticket-air:before {
content: '\a04d'
}
.atg-warehouse:before {
content: '\a04e'
}
.atg-revenue:before{
content: '\a04f'
}
.atg-revenue:before {
content: '\a04f'
}
.atg-ticket-air-thin:before {
content: '\a050'
}
.atg-client:before {
content: '\a051'
}

View File

@ -108,7 +108,11 @@ h1, h2, h3, h4, h5, h6, p {
}
.w-100 {
width: 100%;
width: 100% !important
}
.w-n{
width:none !important
}
.cfull, .con {
@ -124,6 +128,14 @@ h1, h2, h3, h4, h5, h6, p {
.cfull .r, .con .r {
max-width: 100%;
}
.w-s-100{
width: 100% !important
}
.w-s-n{
width: none !important
}
}
@media (min-width:768px) {
@ -181,12 +193,12 @@ h1, h2, h3, h4, h5, h6, p {
margin-left: 0;
}
.r > .c, .r > [class^=c-] {
.r > .c {
padding-right: 0;
padding-left: 0;
}
.r-n-g > [class^=c-], .r > [class^=c-] {
.r-n-g > [class^=c-] {
position: relative;
width: 100%;
min-height: 1px;
@ -298,6 +310,10 @@ h1, h2, h3, h4, h5, h6, p {
display: flex !important;
}
.d-f-i {
display: inline-flex !important;
}
.f-r {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
@ -1326,6 +1342,9 @@ h1, h2, h3, h4, h5, h6, p {
.pr-m-5 {
padding-right: 3rem !important;
}
.pr-m-4 {
padding-right: 1.5rem !important;
}
.gap-m-0 {
gap: 0 !important;
@ -2463,6 +2482,13 @@ h3 {
--input-padding: 7px;
}
@media (min-width: 576px){
:root{
--margin-base: 50px
}
}
.m-gap {
margin: 0 var(--margin-gap);
}

View File

@ -39,8 +39,12 @@
--mNav-width: 340px !important;
}
}
.feather-img {
/* Feather viền 5px */
-webkit-mask-image: linear-gradient(to top, transparent 0px, black 10px), linear-gradient(to right, transparent 0px, black 10px), linear-gradient(to bottom, transparent 0px, black 10px), linear-gradient(to left, transparent 0px, black 10px);
-webkit-mask-composite: intersect;
mask-composite: intersect;
}
.f-header{
@ -48,13 +52,17 @@
}
.f-header.show.ios{
position: sticky;
position: absolute;
}
.rSlider{
margin: 0;
}
h1, h2, h3, h4, h5, h6, h7, p, span, div {
user-select: none; /* Ngăn không cho bôi đen copy text */
cursor: default
}
@media (min-width: 996px) {
:root {
@ -148,7 +156,7 @@ body {
}
#header {
position: fixed;
position: absolute;
width: 100%;
z-index: 1000;
}
@ -380,22 +388,14 @@ body {
.con-feature {
position: relative;
top: 0;
margin-top: 30px;
margin-bottom: 30px;
width: 100%
margin-bottom: 30px
}
@media (min-width: 768px){
.con-feature {
position: absolute;
left: 50%;
z-index: 100;
transform: translateX(-50%);
margin-top: 0;
margin-bottom: 0;
top: -140px
margin-top: -140px
}
}
@ -603,13 +603,20 @@ div[class*=sec]{
}
.section {
font-size: 1rem;
padding: 100px 0 70px
}
.desc {
line-height: 1.8
}
.section .sub-title {
color: var(--color-primary);
text-transform: uppercase;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 1px;
font-size: 1.2rem
@ -621,10 +628,11 @@ div[class*=sec]{
.grid {
margin: 0 20px;
overflow:hidden;
overflow: hidden;
border-radius: var(--radius);
margin-bottom: 40px;
word-wrap: break-word;
border: 1px solid #f1f1f1;
box-shadow: rgb(158 158 158 / .1) 0 8px 11px 4px;
}
@ -632,11 +640,16 @@ div[class*=sec]{
width: 100%
}
.grid-image{
background-color:transparent;
overflow:hidden;
border-radius: var(--radius)
}
.grid-body {
position: relative;
padding: 35px 40px;
padding-right: 32px;
border: 1px solid #f1f1f1;
border-top: none
}
.grid-body .sub-title{
@ -770,11 +783,12 @@ div[class*=sec]{
margin-top: 0;
}
.order-list li {
display: inherit;
position: relative;
padding-left: 30px;
margin: 12px 0px;
margin: 4px 0px;
}
.section-break{
@ -791,9 +805,7 @@ div[class*=sec]{
opacity: .4;
}
.section-break .sub-title{
text-transform: capitalize;
margin-bottom: 10px;
color: var(--color-primary)
margin-bottom: 10px
}
.section-break .title{
text-align:center;
@ -804,25 +816,36 @@ div[class*=sec]{
.about-section {
transition: .3s padding ease-in-out;
padding-top: 0
padding-top: 20px;
padding-bottom: 30px
}
@media (min-width: 768px) {
.about-section {
padding-top: 620px
}
.block-about {
padding: 80px 0 0
}
.about-section .experience {
border-radius: var(--radius);
background-color: #fff;
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
max-width: 335px;
z-index: 1;
position: absolute;
right: 40px;
border-right: 3px solid #FF4800;
bottom: -60px;
padding: 20px 30px
}
@media (min-width: 992px) {
.about-section {
padding-top: 550px
.block-about {
padding-top: 0;
padding-left: 100px
}
}
@media (min-width: 1200px) {
.about-section {
padding-top: 300px
.about-section .experience {
right: -50px
}
}
@ -841,19 +864,20 @@ div[class*=sec]{
transform: scale(1.1);
}
.experience {
border-radius: var(--radius);
background-color: #fff;
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
max-width: 335px;
z-index: 1;
position: absolute;
right: -50px;
bottom: -60px;
padding: 20px 30px;
border-right: 3px solid #FF4800;
.about-section .order-list .atg {
color: var(--color-primary);
left: -30px;
}
.about-section .order-list .atg:before {
margin-bottom: 4px;
}
.signature img {
width: 125px;
}
.experience p {
font-size: 1.2rem;
margin: 0 0 20px;
@ -873,9 +897,221 @@ div[class*=sec]{
left: -130px;
}
}
/**End Section**/
/**Perfomance Section**/
.con-perf-section{
margin-top: 25px;
}
@media (min-width: 992px){
.con-perf-section {
margin-top: 100px
}
}
.perf-section{
padding: 80px 0;
color: #fff
}
.perf-section .r-n-g{
margin: 0 -20px
}
.perf-section .grid {
border: none;
box-shadow: none;
margin: 20px
}
.perf-section span {
text-align: center;
font-size: 1.2rem;
font-weight: 500
}
.perf-section h1 {
font-size: 1.6rem;
}
@media (min-width: 576px) {
.perf-section h1 {
font-size: 2rem;
}
}
@media (min-width: 992px){
.perf-section h1 {
font-size: 2.5rem;
}
}
/***End Section***/
/**Cert Section***/
.cert-section {
padding-top:0;
padding-bottom: 60px
}
.cert-section .block1{
background: var(--text-color-lW3);
padding: 100px 0;
}
.cert-section .block2{
z-index: 100;
margin-top: -100px
}
@media (min-width: 1200px){
.cert-section .block2 {
margin-top: -140px
}
}
.cert-section .desc {
border-left: 3px solid var(--color-primary);
margin: 30px 0
}
.cert-section .grid {
background: var(--color-primary);
transition: all .3s ease-in-out;
margin-bottom: 0;
margin-top: 40px;
height: calc(100% - 40px);
padding: 20px;
color:white
}
.cert-section .grid-image {
margin: 40px 20px 0
}
.cert-section .grid:hover {
background: var(--text-color-dark);
transform: translateY(-5px);
}
.cert-section .block-content{
margin-left: -20px;
margin-right: -20px
}
/***End Section**/
/***Our Service Section***/
.our-section {
padding:0
}
.our-section .desc{
margin-top: 0
}
.our-section .sep {
width: 8px;
border-radius: 5px;
height: 100%;
background: #FF4800
}
.our-section .block1 .sub-title{
color:white
}
.our-section .block1{
padding-top: 100px;
padding-bottom: 140px;
background: var(--color-primary);
color:white
}
.our-section .block2{
margin-top: -80px
}
.our-section .block2 .r-n-g{
margin: 0 -20px;
}
.our-section .grid{
border:none
}
.our-section .grid-body:after {
transform: scale(0.8) rotate(-90deg);
content: "\a028";
position: absolute;
font-family: 'atg-admin-font';
right: -60px;
bottom: -100px;
font-size: 9rem;
color: #FF4800;
opacity: 0.06;
transition: all 400ms ease-out 0s;
}
.our-section .service-item-thumb:before {
z-index: 1;
background: #03324d;
border-radius: 8px 8px 0 0;
position: absolute;
height: 0;
opacity: 0;
width: 100%;
left: 0;
top: 0;
transition: all .4s ease-out 0s;
content: "";
}
.our-section .grid:hover .service-item-thumb:before {
height: 100%;
opacity: 0.4;
}
.our-section .grid:hover .grid-body:after {
transform: scale(1.2) rotate(90deg);
right: 30px;
bottom: 0;
}
.our-section .grid:hover .service-item-icon {
transform: translateY(30px)
}
.our-section .grid:hover .service-item-icon i {
transform: rotateY(360deg);
}
.service-item-icon {
transform: translateY(20px);
position: absolute;
right: 20px;
background: var(--color-primary);
color: #fff;
padding: 16px 20px;
bottom: 0;
border-radius: 5px;
z-index: 1;
transition: all .4s ease-out 0s;
}
.service-item-icon i {
transition: 0.6s linear;
}
/**End Section*/
/**Blog Section*/
.blog-section .title{
text-align: center
}
.blog-author {
position: absolute;
@ -1016,24 +1252,27 @@ div[class*=sec]{
/**Parallax Plugin**/
.parallax {
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.parallax::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
background-attachment: fixed;
z-index: 0;
}
.con-parallax {
position: relative;
overflow: hidden
}
.bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
.bg-img {
position: absolute;
top: 0; /* bắt đầu từ trên */
left: 50%;
height: 100%;
width: 100%;
transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */
transition: transform 0.1s linear;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 854 KiB

View File

@ -43,23 +43,95 @@ window.L1000 = function () {
}
}
});
document.querySelectorAll('.parallax').forEach(el => {
const parallaxEls = document.querySelectorAll('.parallax');
let ticking = false;
parallaxEls.forEach(el => {
const parent = el.closest(".con-parallax");
if (parent) {
parent.style.height = parent.offsetHeight + "px";
const content = parent.querySelector("[data-content]");
(content) ? content.style = "position:absolute; top:0; left:0" : "";
}
el.style.height = "100vh";
const src = el.getAttribute('data-src');
el.style.backgroundImage = `url(${src})`;
});
window.app.on("App_Scrolling", (t) => {
document.querySelectorAll('.parallax').forEach(el => {
if (!ticking) {
window.requestAnimationFrame(() => {
updateParallax(t, parallaxEls);
ticking = false;
});
ticking = true;
}
});
const countNum = document.querySelectorAll('[CountNumber]');
let tickingC = false;
window.app.on("App_Scrolling", (t) => {
if (!tickingC) {
window.requestAnimationFrame(() => {
countNum.forEach((el) => {
animateCount(el);
})
tickingC = false;
});
tickingC = true;
}
});
}
function animateCount(el) {
const rect = el.getBoundingClientRect();
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
if (el.hasAttribute("render")) {
if (!inView) {
el.removeAttribute("render");
}
return;
}
if (inView) {
el.setAttribute("render", "");
const min = parseInt(el.getAttribute("num-min") ?? 0);
const max = parseInt(el.getAttribute("num-max") ?? 1);
const prefix = el.getAttribute("prefix") ?? "";
const duration = parseInt(el.getAttribute("duration") ?? 1000); // ms
const interval = 10; // ms mỗi tick
const steps = duration / interval;
const stepValue = Math.ceil((max - min) / steps);
let current = min;
let tickCount = 0;
function tick() {
current = Math.min(min + stepValue * tickCount, max);
el.textContent = prefix + current.toLocaleString("en-US");
tickCount++;
if (tickCount <= steps) {
window.requestTimeout(tick, interval);
}
}
tick(); // khởi chạy
}
}
function updateParallax(t, parallaxEls) {
parallaxEls.forEach(el => {
const rect = el.getBoundingClientRect();
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
if (inView) {
const depth = parseFloat(el.dataset.depth || 0.5);
const yPos = -(t * depth);
el.style.backgroundPosition = `center ${yPos}px`;
});
const progress = rect.top / window.innerHeight;
const img = el.querySelector('.bg-img');
if (el && img) {
// vị trí ban đầu wrapper
const wrapperOffset = -el.offsetHeight + (el.offsetHeight / 2); // top: -100% + translateY(50%)
// offset parallax
const parallaxOffset = progress * depth * el.offsetHeight;
// áp dụng vào image
img.style.transform = `translate(-50%, ${wrapperOffset + parallaxOffset}px)`;
}
}
});
}
window.AScript.set("1000", true);

View File

@ -7,13 +7,14 @@ import ADropDown from '/js/libs/js-ADropDown.js'
// '/css/atg-font/atg-admin-font.css'
//];
//window.app.loadCSS(asyncStyleSheets);
/**/
/*<img src="/images/logo/logo.jpg" />*/
//
class AsyncLayout extends ALayout {
constructor() {
super();
this.layMNav = `<div class="m-header">
<a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
<img src="/images/logo/logo.jpg" />
<span class="d-f no-wrap ml-2"><b class="lg">VIN</b> <b class="lg lg1">FONT</b></span>
<a href="javascript:void(0)" class="hd-close">
<i class="atg atg-x"></i>