trungduong/TWA-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 10-09-25

Browse Source
This commit is contained in:
trungduong
2025-09-10 07:56:07 +07:00
parent e44fe5dcf8
commit 237daad289
14 changed files with 269 additions and 4995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
TWA-App/Program.cs
View File

@ -34,12 +34,6 @@ if (!app.Environment.IsDevelopment())
app.UseHsts(); app.UseHsts();
} }
app.UseForwardedHeaders(); 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.UseHttpsRedirection();
app.UseRouting(); app.UseRouting();

60
TWA-App/Views/Home/Index.cshtml
View File

@ -1,6 +1,6 @@
<div class="cfull"> <div class="cfull">
<div class="rSlider"> <div class="rSlider">
<div class="swiper mainSlider"> <div class="swiper swiperM mainSlider">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg"));"> <div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg"));">
@ -307,9 +307,57 @@
</div> </div>
</div> </div>
</section> </section>
<section class="con-parallax"> <section class="con-parallax">
<div class="parallax" data-dept="0.3" data-src="https://wp.storebuild.shop/portx/wp-content/uploads/2023/07/cta1-bg.jpg"></div> <div class="bg-wrapper parallax" data-dept="0.3">
<img src="~/images/1000/directly.jpg" alt="Background" class="bg-img">
</div>
<div class="con section partner-section section-break" data-content>
<div class="r">
<div class="c-12 d-f f-c a-i-center">
<span class="sub-title">
Delivering excellence with top airline partners
</span>
<h2 class="title">
Global Strategic Partnerships
</h2>
</div>
</div>
<div class="r mt-3">
<div class="c-12">
<div class="r-n-g">
<div class="swiper airlineSwiper">
<div class="swiper-wrapper a-i-center">
<div class="swiper-slide h-100 d-f a-i-center j-c-center">
<div class="logo-card"><img class="w-100" src="~/images/1000/partnerint/PR.png" alt="Qatar Airways logo" loading="lazy" /></div>
</div>
<div class="swiper-slide h-100 d-f a-i-center j-c-center">
<div class="logo-card"><img class="w-100" src="~/images/1000/partnerint/QR.png" alt="China Airlines logo" loading="lazy" /></div>
</div>
<div class="swiper-slide h-100 d-f a-i-center j-c-center">
<div class="logo-card"><img class="w-100" src="~/images/1000/partnerint/MaCau.png" alt="Philippine Airlines logo" loading="lazy" /></div>
</div>
<div class="swiper-slide h-100 d-f a-i-center j-c-center">
<div class="logo-card"><img class="w-100" src="~/images/1000/partnerint/K6.png" alt="Cambodia Angkor Air logo" loading="lazy" /></div>
</div>
<div class="swiper-slide h-100 d-f a-i-center j-c-center">
<div class="logo-card"><img class="w-100" src="~/images/1000/partnerint/SKCargo-logo.png" alt="Vietnam Airlines logo" loading="lazy" /></div>
</div>
<!-- Thêm logo khác tại đây -->
</div>
<div class="swiper-button-prev" aria-label="previous"></div>
<div class="swiper-button-next" aria-label="next"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="con-parallax">
<div class="bg-wrapper parallax" data-dept="0.3">
<img src="https://wp.storebuild.shop/portx/wp-content/uploads/2023/07/cta1-bg.jpg" alt="Background" class="bg-img">
</div>
<div class="con section section-break" data-content> <div class="con section section-break" data-content>
<div class="r"> <div class="r">
<div class="c-12"> <div class="c-12">
@ -346,7 +394,7 @@
<div class="grid-body d-f f-c"> <div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center"> <div class="blog-author d-f a-i-center">
<div class="blog-author-img mr-10"> <div class="blog-author-img mr-10">
<img class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g"> <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
</div> </div>
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div> <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
</div> </div>
@ -373,7 +421,7 @@
<div class="grid-body d-f f-c"> <div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center"> <div class="blog-author d-f a-i-center">
<div class="blog-author-img mr-10"> <div class="blog-author-img mr-10">
<img class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g"> <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
</div> </div>
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div> <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
</div> </div>
@ -400,7 +448,7 @@
<div class="grid-body d-f f-c"> <div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center"> <div class="blog-author d-f a-i-center">
<div class="blog-author-img mr-10"> <div class="blog-author-img mr-10">
<img class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g"> <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
</div> </div>
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div> <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
</div> </div>

14
TWA-App/Views/Partial/Header.cshtml
View File

@ -17,15 +17,17 @@
</div> </div>
</div> </div>
<div class="con hblock2"> <div class="con hblock2">
<div class="r j-c-between a-i-center"> <div class="r a-i-center">
<div class="d-f d-l-n f-c ico-menu"> <div class="m-navbar">
<div><span style="width:100%"></span></div> <div class="d-f d-l-n f-c ico-menu">
<div><span style="width:100%"></span></div> <div><span style="width:100%"></span></div>
<div><span style="width:100%"></span></div> <div><span style="width:100%"></span></div>
<div><span style="width:100%"></span></div>
</div>
</div> </div>
<nav class="d-n d-l-f c-l-11 navmain"> <nav class="d-n d-l-f c-l-11 navmain">
@await Html.PartialAsync("~/Views/Partial/MenuAP.cshtml") @await Html.PartialAsync("~/Views/Partial/MenuAP.cshtml")
</nav> </nav>
<a href="#"><span class="atg atg-search a-2x mb-1"></span></a> <a class="ml-auto" href="#"><span class="atg atg-search a-2x mb-1"></span></a>
</div> </div>
</div> </div>

84
TWA-App/wwwroot/css/site.css
View File

@ -46,11 +46,26 @@
mask-composite: intersect; mask-composite: intersect;
} }
.main-wrapper{
.f-header{ transform:translateZ(0)
top: -140px
} }
.f-header {
top: -65px
}
.f-header .navmain a {
color: #000000
}
.f-header .navmain a.active, .f-header .navmain a:hover, .f-header .navmain .nav-i.active a {
color: var(--text-color-dark)
}
.f-header .ico-menu span{
background-color: var(--text-color-dark) !important
}
.f-header.show.ios{ .f-header.show.ios{
position: absolute; position: absolute;
} }
@ -260,8 +275,8 @@ body {
position: absolute; position: absolute;
height: 0; height: 0;
width: 45%; width: 45%;
right: 50%; right: 49%;
left: 50%; left: 49%;
bottom: 0; bottom: 0;
height: 3px; height: 3px;
background: var(--color-primary); background: var(--color-primary);
@ -323,17 +338,17 @@ body {
} }
.m-header .nav-mainmenu { .m-header .navmain {
margin: 20px 0; margin: 20px 0;
} }
.m-header .nav-mainmenu .nav-item.active::after, .m-header .nav-mainmenu .nav-item:hover::after, .m-header .nav-mainmenu .nav-i.active .nav-item::after, .m-header .nav-mainmenu .nav-i.activeM .nav-item::after { .m-header .navmain .nav-item.active::after, .m-header .navmain .nav-item:hover::after, .m-header .navmain .nav-i.active .nav-item::after, .m-header .navmain .nav-i.activeM .nav-item::after {
left: 0; left: 0;
right: 50%; right: 50%;
width: 50% width: 50%
} }
.m-header .nav-mainmenu .nav-item.active::before, .m-header .nav-mainmenu .nav-item:hover::before, .m-header .nav-mainmenu .nav-i.active .nav-item::before, .m-header .nav-mainmenu .nav-i.activeM .nav-item::before { .m-header .navmain .nav-item.active::before, .m-header .navmain .nav-item:hover::before, .m-header .navmain .nav-i.active .nav-item::before, .m-header .navmain .nav-i.activeM .nav-item::before {
left: 50%; left: 50%;
right: 0; right: 0;
width: 50%; width: 50%;
@ -344,12 +359,16 @@ body {
height: auto !important; height: auto !important;
} }
.m-header .nav-mainmenu a { .m-header .navmain a {
padding: 10px 0; padding: 10px 0;
display: inline-flex; display: inline-flex;
} }
.m-header .nav-mainmenu [data-dropdown] .sub-item { .m-header .navmain .nav-item{
color:#000
}
.m-header .navmain [data-dropdown] .sub-item {
position: relative; position: relative;
top: 0 !important; top: 0 !important;
box-shadow: none; box-shadow: none;
@ -368,11 +387,22 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: transparent background-color: transparent
} }
.swiper { .swiperM {
border-radius: var(--radius); border-radius: var(--radius);
min-height: 800px; min-height: 800px;
height: 100vh height: 100vh
} }
.swiper-button-next,
.swiper-button-prev {
opacity: 0;
transition: opacity 0.3s;
}
/* Khi hover vào swiper, hiện nút */
.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
opacity: 1;
}
.con_slider { .con_slider {
background-color: rgba(17, 39,88, 0.4); background-color: rgba(17, 39,88, 0.4);
@ -1106,7 +1136,11 @@ div[class*=sec]{
} }
/**End Section*/ /**End Section*/
/***Section Partner***/
.partner-section{
padding: 80px 0
}
/***End Section***/
/**Blog Section*/ /**Blog Section*/
.blog-section .title{ .blog-section .title{
@ -1263,7 +1297,7 @@ div[class*=sec]{
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
z-index: -1; z-index: -1;
} }
@ -1273,6 +1307,28 @@ div[class*=sec]{
left: 50%; left: 50%;
height: 100%; height: 100%;
width: 100%; width: 100%;
transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */ object-fit: cover;
transition: transform 0.1s linear; transition: transform 0.1s linear;
transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */
} }
/*Overlay*/
.c-aoverlay.show {
opacity: 1;
visibility: visible;
background: rgb(86 83 96 / 0.32);
width: 100vh;
}
.c-aoverlay {
position: absolute;
top: 0;
width: 0;
height: 100vh;
right: 0;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all ease-in .4s;
}
/*End Ovelay*/

BIN
TWA-App/wwwroot/images/1000/directly.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
TWA-App/wwwroot/images/1000/partnerint/K6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
TWA-App/wwwroot/images/1000/partnerint/MaCau.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
TWA-App/wwwroot/images/1000/partnerint/PR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
TWA-App/wwwroot/images/1000/partnerint/QR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
TWA-App/wwwroot/images/1000/partnerint/SKCargo-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

10
TWA-App/wwwroot/images/1000/partnerint/cathay.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 57 KiB

4904
TWA-App/wwwroot/js/ext_libs/swiper-bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
TWA-App/wwwroot/js/js-page/1000.js
View File

@ -43,13 +43,33 @@ window.L1000 = function () {
} }
} }
}); });
const parallaxEls = document.querySelectorAll('.parallax'); const parallaxEls = document.querySelectorAll('.parallax');
let ticking = false; let ticking = false;
const swiper1 = new Swiper('.airlineSwiper', {
slidesPerView: 1,
spaceBetween: 30,
autoplay: {
delay: 2000, // 5s
disableOnInteraction: false, // không dừng khi hover hay click
},
loop: true, // bật loop để chạy liên tục
speed: 1000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
loopedSlides: 5, // số slide duplicate
breakpoints: {
1200: { slidesPerView: 4 }, // màn hình ≥1200px
768: { slidesPerView: 3 }, // ≥768px=
0: { slidesPerView: 2 } // <576px
},
});
parallaxEls.forEach(el => { parallaxEls.forEach(el => {
const parent = el.closest(".con-parallax"); const parent = el.closest(".con-parallax");
if (parent) { if (parent) {
parent.style.height = parent.offsetHeight + "px"; parent.style.height = parent.querySelector("[data-content]").offsetHeight + "px";
} }
}); });
window.app.on("App_Scrolling", (t) => { window.app.on("App_Scrolling", (t) => {
@ -114,23 +134,39 @@ function animateCount(el) {
} }
function updateParallax(t, parallaxEls) { function updateParallax(t, parallaxEls) {
parallaxEls.forEach(el => { parallaxEls.forEach(el => {
const rect = el.getBoundingClientRect(); const section = el.closest('.con-parallax');
if (!section) return;
const rect = section.getBoundingClientRect();
const sectionHeight = section.offsetHeight;
// Chỉ xử lý khi section trong khung nhìn
const inView = rect.bottom > 0 && rect.top < window.innerHeight; const inView = rect.bottom > 0 && rect.top < window.innerHeight;
if (!inView) return;
if (inView) { // Set height parent 1 lần
const depth = parseFloat(el.dataset.depth || 0.5); const content = section.querySelector('[data-content]');
const progress = rect.top / window.innerHeight; if (content && !section.dataset.heightSet) {
const img = el.querySelector('.bg-img'); section.style.height = content.offsetHeight + 'px';
if (el && img) { section.dataset.heightSet = 'true'; // đánh dấu đã set height
// 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)`;
}
} }
const img = el.querySelector('.bg-img');
if (!img) return;
const imgHeight = img.offsetHeight;
const depth = parseFloat(el.dataset.depth ?? 1); // 1 = chạy hết, <1 = chạy ít hơn
// progress: 0 khi section top chạm viewport top, 1 khi section bottom chạm viewport bottom
const progress = (window.innerHeight - rect.top) / (window.innerHeight + sectionHeight);
const clamped = Math.min(1, Math.max(0, progress));
// scrollable = toàn bộ quãng đường ảnh có thể chạy
const scrollable = imgHeight - sectionHeight;
// offset Y
const offsetY = -clamped * scrollable * depth;
img.style.transform = `translate(-50%, ${offsetY}px)`;
}); });
} }

114
TWA-App/wwwroot/js/js-page/asyncLayout.js
View File

@ -13,28 +13,54 @@ import ADropDown from '/js/libs/js-ADropDown.js'
class AsyncLayout extends ALayout { class AsyncLayout extends ALayout {
constructor() { constructor() {
super(); super();
this.isLoaded = false;
this.layMNav = `<div class="m-header"> 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/slogo.png" />
<a href="javascript:void(0)" class="hd-close">
<i class="atg atg-x"></i>
</a>
</a>
<div class="navmain d-f f-c">
</div>
</div>`;
this.fHeader = `<div id="fHeader" class="f-header">
<div class="cfull">
<div class="r d-f a-i-center c_second_header">
<a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a"> <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
<span class="d-f no-wrap ml-2"><b class="lg">VIN</b> <b class="lg lg1">FONT</b></span> <img src="/images/logo/slogo.png" style="height:32px" />
<a href="javascript:void(0)" class="hd-close">
<i class="atg atg-x"></i>
</a>
</a> </a>
<div class="nav-mainmenu d-f f-c"> <div class="ml-auto navmain d-x-f d-n">
</div> </div>
</div>`;
<div class="ml-auto d-f d-x-n a-i-center">
<a class="d-f nav-login mr-0"><i class="atg atg-search"></i></a>
<a app-nav href="${window.GetAbsoluteURL("/Login")}" class="d-f nav-login"><i class="atg atg-user"></i></a>
<div class="m-navbar">
<div class="d-f f-c ico-menu p-0">
<div><span style="width:100%"></span></div>
<div><span style="width:100%"></span></div>
<div><span style="width:100%"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>`;
} }
_createFHeader() { _createFHeader() {
document.body.insertAdjacentHTML("afterbegin", this.layMNav); document.body.insertAdjacentHTML("afterbegin", this.layMNav);
//document.body.insertAdjacentHTML("afterbegin", this.fHeader); document.body.insertAdjacentHTML("afterbegin", this.fHeader);
//var h = document.querySelector("#fHeader .nav-mainmenu"); var h = document.querySelector("#fHeader .navmain");
//var h2 = document.querySelector(".m-header"); var h2 = document.querySelector(".m-header");
//var he2 = h2.querySelector(".nav-mainmenu"); var he2 = h2.querySelector(".navmain");
//var r = document.querySelector("#header"); var r = document.querySelector("#header");
//r.querySelector(".nav-mainmenu").childNodes.forEach(el => { r.querySelector(".navmain").childNodes.forEach(el => {
// he2.appendChild(el.cloneNode(true)); he2.appendChild(el.cloneNode(true));
// h.appendChild(el.cloneNode(true)); h.appendChild(el.cloneNode(true));
//}) });
} }
dispose() { dispose() {
this.isLoaded = false; this.isLoaded = false;
@ -54,40 +80,36 @@ class AsyncLayout extends ALayout {
this._createFHeader(); this._createFHeader();
this.dpLang = new ADropDown(); this.dpLang = new ADropDown();
this.dpLang.bindDropDown(document.querySelector(".langnav")); this.dpLang.bindDropDown(document.querySelector(".langnav"));
this.a1 = new AMenu("#header .navmain", ".m-header", document.querySelectorAll(".ico-menu"), true);
// window.app.initNavs("Async"); window.app.initNavs("Async");
// var hHeader = document.getElementById("header").clientHeight; var hHeader = document.getElementById("header").clientHeight;
// var fHeader = document.getElementById("fHeader"); var fHeader = document.getElementById("fHeader");
// if (window.getOS() == "iOS") { if (window.getOS() == "iOS") {
// fHeader.classList.add("ios"); fHeader.classList.add("ios");
// } }
// const idE0 = window.app.on("App_Scrolling", (scrollY) => { const idE0 = window.app.on("App_Scrolling", (scrollY) => {
// if (scrollY > hHeader && !fHeader.classList.contains("show")) { if (scrollY > hHeader && !fHeader.classList.contains("show")) {
// fHeader.classList.add("show"); fHeader.classList.add("show");
// } }
// if (scrollY < hHeader && fHeader.classList.contains("show")) { if (scrollY < hHeader && fHeader.classList.contains("show")) {
// fHeader.classList.remove("show"); fHeader.classList.remove("show");
// } }
// }); });
// this.addCustomEvent(idE0, window.app, "Async"); this.addCustomEvent(idE0, window.app, "Async");
// var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true); var a1 = new AMenu("#header .navmain", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true);
// this.listAObject.add(a1); this.listAObject.add(a1);
// var a2 = new AMenu("#fHeader .nav-mainmenu", null, null); var a2 = new AMenu("#fHeader .navmain", null, null);
// this.listAObject.add(a2); this.listAObject.add(a2);
// const idE1 = window.app.on("redirect_page", (e) => { const idE1 = window.app.on("redirect_page", (e) => {
// a1.changeActive(); a1.changeActive();
// a2.changeActive(); a2.changeActive();
// }); });
// this.addCustomEvent(idE1, window.app, "Async"); this.addCustomEvent(idE1, window.app, "Async");
// const f = function (e) { const f = function (e) {
// window.app.initNavApp(window.GetAbsoluteURL("/Search")); window.app.initNavApp(window.GetAbsoluteURL("/Search"));
// } }
// const btnMHeader = document.getElementById("btnMHeader");
//// btnMHeader.addEventListener(this.eventName, f);
// this.addSystemEvent(this.eventName, btnMHeader, f);
} }
} }
window.ALayout.set("Async", new AsyncLayout()); window.ALayout.set("Async", new AsyncLayout());