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

12-09-2025

Browse Source
This commit is contained in:
trungduong
2025-09-12 10:32:29 +07:00
parent 237daad289
commit 142f7afb18
6 changed files with 277 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,13 +30,51 @@
</div>
</div>
<div class="swiper-slide">
<div class="background">
<img src="/images/banner/b3.jpg">
<div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/drone1.jpg"));">
</div>
<div class="con_slider">
<div class="h-100 d-f a-i-center">
<div class="cfull">
<div class="r d-f f-c a-i-center banner-content">
<h1>Air Freight</h1>
<div class="sec-header">
<h2>Global air, local care</h2>
</div>
<span class="desc">
Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust
</span>
<div class="d-f mt-5">
<div class="sec-1">
<button class="btn btn-second">See Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="background">
<img src="/images/banner/b2.jpg">
<div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/airline.jpg"));">
</div>
<div class="con_slider">
<div class="h-100 d-f a-i-center">
<div class="cfull">
<div class="r d-f f-c a-i-center banner-content">
<h1>Air Freight</h1>
<div class="sec-header">
<h2>Global air, local care</h2>
</div>
<span class="desc">
Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust
</span>
<div class="d-f mt-5">
<div class="sec-1">
<button class="btn btn-second">See Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -234,23 +272,23 @@
<div class="con block1">
<div class="r">
<div class="c-l-5">
<div class="d-f f-c a-i-end">
<div class="d-f f-c a-i-start a-i-l-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-1 pl-3 pr-3 j-c-center d-n d-l-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>
<p class="desc mt-3 mt-l-0">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="r-n-g j-c-center">
<div class="c-12 c-s-6 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="">
@ -266,7 +304,7 @@
</div>
</div>
</div>
<div class="c-l-4">
<div class="c-12 c-s-6 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="">
@ -282,7 +320,7 @@
</div>
</div>
</div>
<div class="c-l-4">
<div class="c-12 c-s-6 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="">
@ -354,6 +392,101 @@
</div>
</div>
</section>
<section class="section">
<div class="con">
<div class="r">
<div class="c-12 d-f f-c tabQuoute">
<div class="atabs">
<div class="tab-item">
<a href="javascript:void(0)" class="item active">Get a Quote</a>
</div>
<div class="tab-item">
<a href="javascript:void(0)" class="item">Track &amp; Trace</a>
</div>
</div>
<div class="tabcontents">
<div class="d-f f-c tabcontent">
<div class="form__group">
<div class="r">
<label class="choice c-4">
<input type="radio" name="service_type" value="OCEAN">
<span>Ocean Freight</span>
</label>
<label class="choice c-4">
<input type="radio" name="service_type" value="AIR">
<span>Air Freight</span>
</label>
<label class="choice c-4">
<input type="radio" name="service_type" value="LAND">
<span>Land Transport</span>
</label>
</div>
</div>
<div class="r gap-2">
<label class="field c-4">
<span class="field__label">Name</span>
<input class="field__input" type="text" name="name">
</label>
<label class="field c-4">
<span class="field__label">E-mail</span>
<input class="field__input" type="email" name="email">
</label>
<label class="field c-4">
<span class="field__label">Phone</span>
<input class="field__input" type="tel" name="phone">
</label>
</div>
<div class="r gap-2">
<label class="field c-6">
<span class="field__label">Cargo Type</span>
<input class="field__input" type="text" name="cargo_type">
</label>
<label class="field c-6">
<span class="field__label">Origin</span>
<input class="field__input" type="text" name="origin">
</label>
<label class="field c-6">
<span class="field__label">Destination</span>
<input class="field__input" type="text" name="destination">
</label>
</div>
<div class="form__group">
<div class="r gap-2">
<label class="field c-2">
<span class="field__label">Qty</span>
<input class="field__input" type="number" name="qty">
</label>
<label class="field c-2">
<span class="field__label">Weight</span>
<input class="field__input" type="text" name="weight">
</label>
<label class="field c-2">
<span class="field__label">Width</span>
<input class="field__input" type="text" name="width">
</label>
<label class="field c-2">
<span class="field__label">Height</span>
<input class="field__input" type="text" name="height">
</label>
<label class="field c-2">
<span class="field__label">Length</span>
<input class="field__input" type="text" name="length">
</label>
</div>
</div>
<button class="btn btn--primary" type="submit">Request a Quote</button>
</div>
<div class="d-f f-c tabcontent">
</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">
@ -385,11 +518,11 @@
</div>
</div>
</div>
<div class="r">
<div class="c-12 c-m-6 c-l-4">
<div class="r j-c-center">
<div class="c-12 c-s-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
<img loading="lazy" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
</a>
<div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center">
@ -413,10 +546,10 @@
</div>
</div>
</div>
<div class="c-12 c-m-6 c-l-4">
<div class="c-12 c-s-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
<img loading="lazy" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
</a>
<div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center">
@ -440,10 +573,10 @@
</div>
</div>
</div>
<div class="c-12 c-m-6 c-l-4">
<div class="c-12 c-s-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
<img loading="lazy" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
</a>
<div class="grid-body d-f f-c">
<div class="blog-author d-f a-i-center">
@ -471,24 +604,6 @@
</div>
</section>
<div class="cfull">
<div class="fl-row-content fl-row-full-width fl-node-content">
<div class="fl-col-group fl-node-5a654bcfda4a1" data-node="5a654bcfda4a1">
<div class="fl-col fl-node-5a654bcfda595 fl-col-bg-color" data-node="5a654bcfda595">
<div class="fl-col-content fl-node-content vamtam-show-bg-image">
<div class="fl-module fl-module-vamtam-map fl-node-5a654c23c25fd" data-node="5a654c23c25fd">
<div class="fl-module-content fl-node-content">
<div class="fl-map">
<iframe src="https://maps.google.com/maps?q=New+York+-+1060%2C+Str.+First+Avenue+1&amp;iwloc=near&amp;output=embed" height="605" frameborder="0" style="border:0;width:100%" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section jsLib {
<script src="@Url.AbsoluteContent("~/js/ext_libs/swiper-bundle.min.js")" js-lib></script>
<script type="module" src="@Url.AbsoluteContent("~/js/js-page/1000.js")" js-lib></script>

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

@ -202,6 +202,10 @@ body {
background: var(--text-color-white)
}
.nav-login{
margin: 0 20px
}
.navmain {
font-weight: 600;
font-size: 1rem
@ -331,10 +335,8 @@ body {
.m-header .hd-close {
font-size: 1.5em;
position: absolute;
top: 5px;
right: 5px;
width: 30px;
height: 30px;
top: 20px;
right: 20px;
}
@ -603,16 +605,19 @@ div[class*=sec]{
.ico-menu {
margin-left: 0;
background-color: transparent;
cursor:pointer
}
.ico-menu div {
background-color: transparent !important
background-color: transparent !important;
cursor: pointer
}
.ico-menu span {
background-color: var(--text-color-white) !important;
border-radius: 2px;
height: 2px !important;
cursor: pointer
}
.ico-menu:hover div:first-child span, .ico-menu.active div:first-child span {
@ -645,7 +650,6 @@ div[class*=sec]{
.section .sub-title {
color: var(--color-primary);
text-transform: capitalize;
font-weight: 700;
letter-spacing: 1px;
@ -835,6 +839,7 @@ div[class*=sec]{
opacity: .4;
}
.section-break .sub-title {
text-align: center;
margin-bottom: 10px
}
.section-break .title{
@ -1140,13 +1145,31 @@ div[class*=sec]{
.partner-section{
padding: 80px 0
}
.partner-section:before{
opacity: .1 !important
}
/***End Section***/
/***Quoute Section****/
.tabQuoute .tabcontent {
padding: 30px
}
/***End Section***/
/**Blog Section*/
.blog-section .title {
text-align: center
}
.blog-section .grid-image{
overflow:hidden;
max-height:230px;
}
.blog-section .grid{
height: calc(100% - 40px)
}
.blog-author {
position: absolute;
top: -25px;
@ -1157,6 +1180,11 @@ div[class*=sec]{
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);
}
.grid-body .title {
text-align: left !important
}
.blog-author-content span{
color: var(--text-color-lW5)
}
@ -1297,7 +1325,7 @@ div[class*=sec]{
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
height: calc(var(--vh, 1vh) * 110);
z-index: -1;
}
@ -1308,7 +1336,6 @@ div[class*=sec]{
height: 100%;
width: 100%;
object-fit: cover;
transition: transform 0.1s linear;
transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */
}
@ -1332,3 +1359,68 @@ div[class*=sec]{
transition: all ease-in .4s;
}
/*End Ovelay*/
/****************** ATabs ***********************/
.atabs {
display: inline-flex;
font-weight: 600;
padding: 1px 0;
}
.atabs .item {
padding: 20px 25px;
color: var(--text-color-dark);
line-height: 2.1;
transition: color .15s ease-in-out, border-color .15s ease-in-out;
}
.atabs .item:not([disabled]):not(.active):hover {
color: var(--color-primary)
}
.atabs .item[disabled] {
cursor: default;
color: var(--text-disable)
}
.animationSlide {
width: 100%;
overflow-x: hidden;
}
.animationSlide .slideContent {
display: inline-flex;
transition: transform .6s ease-in-out
}
.animationSlide .tabcontent.show {
opacity: 1;
}
.animationSlide .tabcontent {
opacity: 0;
}
.animationFade .tabcontent {
opacity: 0;
display: none;
}
.animationFade .tabcontent.show {
display: block;
}
.tabcontents {
border: 1px solid var(--text-color-lW1)
}
.tabcontent.fade {
transition: opacity .6s linear;
}
.atabs .item.active {
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary)
}
/********************* End ***********************/

BIN
TWA-App/wwwroot/images/banner/airline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
TWA-App/wwwroot/images/banner/drone1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

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

@ -1,4 +1,4 @@

import ATab from '/js/libs/js-ATab.js';
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
@ -20,7 +20,24 @@ function updateActiveSlideShow(swiperInstance) {
window.L1000 = function () {
const swiper = new Swiper('.mainSlider', {
loop: true,
effect: 'fade',
fadeEffect: {
crossFade: true, // ảnh cũ mờ dần, ảnh mới xuất hiện
},
autoplay: {
delay: 5000, // 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",
},
on: {
init: function () {
updateActiveSlideShow(this);
},
slideChangeTransitionEnd: function () {
updateActiveSlideShow(this);
}
@ -43,6 +60,7 @@ window.L1000 = function () {
}
}
});
var tabs = new ATab(document.querySelector(".tabQuoute .atabs"), document.querySelector(".tabQuoute .tabcontents"));
const parallaxEls = document.querySelectorAll('.parallax');
let ticking = false;

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

@ -16,7 +16,7 @@ class AsyncLayout extends ALayout {
this.isLoaded = false;
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" />
<img src="/images/logo/slogo.png" style="height:65px" />
<a href="javascript:void(0)" class="hd-close">
<i class="atg atg-x"></i>
</a>
@ -26,7 +26,7 @@ class AsyncLayout extends ALayout {
</div>`;
this.fHeader = `<div id="fHeader" class="f-header">
<div class="cfull">
<div class="con">
<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">
<img src="/images/logo/slogo.png" style="height:32px" />
@ -36,8 +36,8 @@ class AsyncLayout extends ALayout {
</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>
<a class="d-f nav-login mr-0"><i class="atg atg-search a-2x"></i></a>
<a app-nav href="${window.GetAbsoluteURL("/Login")}" class="d-f nav-login"><i class="atg atg-user a-2x"></i></a>
<div class="m-navbar">
<div class="d-f f-c ico-menu p-0">
<div><span style="width:100%"></span></div>