MinhQuan/PresentCorpo
0
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: MinhQuan/PresentCorpo:8a2b4be7acc0e818cf25c5dca8add2fd00383f26
Branches Tags
MinhQuan/PresentCorpo:main
..
compare: MinhQuan/PresentCorpo:main
Branches Tags
MinhQuan/PresentCorpo:main

10 Commits
8a2b4be7ac .. main

Author SHA1 Message Date
MinhQuan 89cd949e87 package: remove unecessary packages 2026-06-07 01:03:52 +07:00
MinhQuan 1223d47d2b package: remove unecessary packages 2026-06-07 00:54:10 +07:00
MinhQuan 0974a1987b Merge pull request 'Refactor: Extract sidebar into a reusable component' (#4) from hiepht/PresentCorpo:dev-hiepht-old into main 
sidebar: turn into component
 2026-06-06 17:50:30 +00:00
hiep200311 870755b570 fix: sidebar không hoạt động khi click nút menu trên mobile 
Lỗi: sidebar.js dùng DOMContentLoaded nhưng script được load động sau khi
sự kiện này đã kích hoạt → initSidebar() không bao giờ chạy → nút menu
không có event listener → click không phản hồi.

Sửa: gọi initSidebar() trực tiếp thay vì bọc trong DOMContentLoaded.
 2026-06-05 21:27:02 +07:00
hiep200311 d198ca2ca0 Revert "fix: expand sidebar visibility to all non-desktop screens (≤992px)" 
This reverts commit b999d51232.
 2026-06-05 21:08:21 +07:00
hiep200311 b999d51232 fix: expand sidebar visibility to all non-desktop screens (≤992px) 
- sidebar.css: change .floating-menu-btn breakpoint from max-width:768px
  to max-width:992px so the button appears on tablets as well
- header.css: move .nav-container hide + .floating-menu-btn show into
  the ≤992px block so desktop nav is hidden and sidebar activates on
  all mobile + tablet viewports (Bootstrap lg breakpoint)
- ≥993px (desktop): header nav visible, sidebar hidden
- ≤992px (tablet + mobile): header nav hidden, sidebar floating button shown"
 2026-06-05 21:06:08 +07:00
hiep200311 9c07af001c feat: add modular sidebarLoader to all missing pages 
- Replace hardcoded inline sidebar markup with <div id="sidebar-container">
  on: aboutMain, newsMain, productMain, serviceMain, contactMain
- Add sidebar-container + sidebarLoader.js script to pages that had no
  sidebar at all: newsArticle1, newsArticle2, productSeparateCommerceLNG,
  productSeparateCommercePNG, productSeparateProductionPRU,
  productSeparateProductionGasMeter, productSeparateProductionVaporizer,
  productSeparateProductionPressureRegulatorValve
- Sidebar HTML/CSS/JS is now loaded dynamically from /components/sidebar/
  on all 14 pages (mobile breakpoint ≤768px)"
 2026-06-05 20:55:20 +07:00
hiep200311 029d79daad Chore: Add GSAP and bootstrap-icons dependencies 2026-06-04 09:33:20 +07:00
hiep200311 c75e660e20 Fix: Resolve responsive layout issues on contact page 2026-06-04 09:29:35 +07:00
hiep200311 3e515182e1 Fix: Resolve responsive layout issues on news pages 2026-06-04 09:26:30 +07:00
15 changed files with 176 additions and 392 deletions
Expand all files Collapse all files
views/aboutPages/aboutMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<div class="hero"> <div class="hero">
@@ -308,6 +254,7 @@
<!-- Scripts --> <!-- Scripts -->
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="aboutPages/aboutMain.js?v=1.2"></script> <script src="aboutPages/aboutMain.js?v=1.2"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
views/components/sidebar/sidebar.js
+7 -3
View File
@@ -1,7 +1,8 @@
// views/components/sidebar/sidebar.js // views/components/sidebar/sidebar.js
document.addEventListener("DOMContentLoaded", () => { // NOTE: This script is always loaded dynamically by sidebarLoader.js AFTER
initSidebar(); // the sidebar HTML has already been injected into #sidebar-container.
}); // DOMContentLoaded has already fired at this point, so we must call
// initSidebar() directly — NOT inside a DOMContentLoaded listener.
function initSidebar() { function initSidebar() {
const floatingMenuBtn = document.getElementById("floatingMenuBtn"); const floatingMenuBtn = document.getElementById("floatingMenuBtn");
@@ -67,3 +68,6 @@ function initSidebar() {
lastScrollY = window.scrollY; lastScrollY = window.scrollY;
}); });
} }
// Call directly — sidebar HTML is already in DOM when this script executes
initSidebar();
views/contactPages/contactMain.css
+29 -19
View File
@@ -35,10 +35,7 @@ a:active {
/* Contact Section */ /* Contact Section */
.contact-section { .contact-section {
padding: 60px 5%;
background-color: #f9f9f9; background-color: #f9f9f9;
max-width: 1400px;
margin: 0 auto;
} }
.page-intro { .page-intro {
@@ -60,19 +57,18 @@ a:active {
} }
.contact-container { .contact-container {
display: flex;
gap: 40px;
margin-top: 30px; margin-top: 30px;
} }
/* Enhanced Form Container */ /* Enhanced Form Container */
.contact-form { .contact-form {
flex: 1;
background-color: white; background-color: white;
padding: 35px; padding: 35px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -303,7 +299,9 @@ a:active {
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
transition: transform 0.6s, opacity 0.6s; transition:
transform 0.6s,
opacity 0.6s;
} }
.submit-button:hover::after { .submit-button:hover::after {
@@ -313,14 +311,17 @@ a:active {
/* Contact Details Section */ /* Contact Details Section */
.contact-details { .contact-details {
flex: 1;
background-color: white; background-color: white;
padding: 35px; padding: 35px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
} }
.contact-details::before { .contact-details::before {
@@ -380,7 +381,9 @@ a:active {
color: #30875f; color: #30875f;
margin-right: 15px; margin-right: 15px;
margin-top: 3px; margin-top: 3px;
transition: color 0.3s, transform 0.3s; transition:
color 0.3s,
transform 0.3s;
} }
.contact-item:hover i { .contact-item:hover i {
@@ -428,8 +431,18 @@ a:active {
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative; position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.map-container iframe {
flex-grow: 1;
height: 100% !important;
min-height: 250px;
} }
.map-container:hover { .map-container:hover {
@@ -488,7 +501,8 @@ a:active {
/* Responsive Design */ /* Responsive Design */
@media (max-width: 1200px) { @media (max-width: 1200px) {
.contact-section { .contact-section {
padding: 50px 4%; padding-top: 50px;
padding-bottom: 50px;
} }
.contact-form, .contact-form,
@@ -514,13 +528,8 @@ a:active {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.contact-container {
flex-direction: column;
}
.contact-form, .contact-form,
.contact-details { .contact-details {
width: 100%;
padding: 25px; padding: 25px;
} }
@@ -557,7 +566,8 @@ a:active {
@media (max-width: 576px) { @media (max-width: 576px) {
.contact-section { .contact-section {
padding: 40px 15px; padding-top: 40px;
padding-bottom: 40px;
} }
.page-intro { .page-intro {
views/contactPages/contactMain.html
+96 -146
View File
@@ -31,162 +31,111 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!----- CONTACT PAGE CONTENT -----> <!----- CONTACT PAGE CONTENT ----->
<section class="contact-section"> <section class="contact-section container py-5 my-3 overflow-hidden">
<h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1> <h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
<div class="contact-container"> <div class="contact-container row g-4 g-lg-5">
<div class="contact-form"> <div class="col-12 col-md-6 mb-4 mb-md-0">
<h2>Gửi tin nhắn cho chúng tôi</h2> <div class="contact-form h-100">
<h2>Gửi tin nhắn cho chúng tôi</h2>
<!-- Optional: Progress bar to show form completion --> <!-- Optional: Progress bar to show form completion -->
<div class="form-progress"> <div class="form-progress">
<div class="form-progress-bar"></div> <div class="form-progress-bar"></div>
</div>
<form action="/contactSubmit" method="POST" id="contactForm">
<div class="form-group">
<label for="name" class="required">Họ và tên</label>
<input
type="text"
id="name"
name="name"
placeholder="Nhập họ và tên của bạn"
required
/>
<div class="error-message">Vui lòng nhập họ và tên của bạn</div>
</div>
<div class="form-group">
<label for="email" class="required">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Nhập địa chỉ email của bạn"
required
/>
<div class="error-message">
Vui lòng nhập một địa chỉ email hợp lệ
</div>
</div>
<div class="form-group">
<label for="phone" class="required">Số điện thoại</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="Nhập số điện thoại của bạn"
required
/>
<div class="error-message">
Vui lòng nhập số điện thoại của bạn
</div>
</div>
<div class="form-group">
<label for="message" class="required">Nội dung</label>
<textarea
id="message"
name="message"
placeholder="Nhập nội dung tin nhắn của bạn"
rows="5"
required
></textarea>
<div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
</div>
<button type="submit" class="submit-button">Gửi tin nhắn</button>
</form>
<!-- Container for success/error messages -->
</div> </div>
<form action="/contactSubmit" method="POST" id="contactForm">
<div class="form-group">
<label for="name" class="required">Họ và tên</label>
<input
type="text"
id="name"
name="name"
placeholder="Nhập họ và tên của bạn"
required
/>
<div class="error-message">Vui lòng nhập họ và tên của bạn</div>
</div>
<div class="form-group">
<label for="email" class="required">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Nhập địa chỉ email của bạn"
required
/>
<div class="error-message">
Vui lòng nhập một địa chỉ email hợp lệ
</div>
</div>
<div class="form-group">
<label for="phone" class="required">Số điện thoại</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="Nhập số điện thoại của bạn"
required
/>
<div class="error-message">
Vui lòng nhập số điện thoại của bạn
</div>
</div>
<div class="form-group">
<label for="message" class="required">Nội dung</label>
<textarea
id="message"
name="message"
placeholder="Nhập nội dung tin nhắn của bạn"
rows="5"
required
></textarea>
<div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
</div>
<button type="submit" class="submit-button">Gửi tin nhắn</button>
</form>
<!-- Container for success/error messages -->
<div id="form-messages"></div>
</div> </div>
<div class="contact-details"> <div class="col-12 col-md-6">
<h2>Thông tin liên hệ</h2> <div class="contact-details h-100">
<div class="contact-info"> <h2>Thông tin liên hệ</h2>
<div class="contact-item"> <div class="contact-info">
<i class="fas fa-map-marker-alt"></i> <div class="contact-item">
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p> <i class="fas fa-map-marker-alt"></i>
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
</div>
<div class="contact-item">
<i class="fas fa-phone-alt"></i>
<p>+84 96 227 7912</p>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<p>info@kylongtech.com</p>
</div>
</div> </div>
<div class="contact-item">
<i class="fas fa-phone-alt"></i>
<p>+84 96 227 7912</p>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<p>info@kylongtech.com</p>
</div>
</div>
<div class="map-container"> <div class="map-container">
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s"
width="100%" class="w-100"
height="300" height="300"
style="border: 0" style="border: 0"
allowfullscreen="" allowfullscreen=""
loading="lazy" loading="lazy"
></iframe> ></iframe>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -197,6 +146,7 @@
<!-- Scripts --> <!-- Scripts -->
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="contactPages/contactMain.js?v=1.1"></script> <script src="contactPages/contactMain.js?v=1.1"></script>
</body> </body>
views/newsPages/newsArticle1/newsArticle1.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden"> <div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8"> <div class="col-12 col-md-10 col-lg-8">
@@ -498,6 +501,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script> <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body> </body>
views/newsPages/newsArticle2/newsArticle2.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden"> <div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8"> <div class="col-12 col-md-10 col-lg-8">
@@ -314,6 +317,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script> <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body> </body>
views/newsPages/newsMain/newsMain.html
+3 -56
View File
@@ -31,62 +31,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- NEWS CONTENT SECTION --> <!-- NEWS CONTENT SECTION -->
<main class="news-container"> <main class="news-container">
@@ -281,6 +227,7 @@
<script src="newsPages/newsMain/newsMain.js?v=1.1"></script> <script src="newsPages/newsMain/newsMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>
views/productPages/productMain/productMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- PRODUCT HERO SECTION --> <!-- PRODUCT HERO SECTION -->
<div class="symbol-hero"> <div class="symbol-hero">
@@ -379,6 +325,7 @@
<script src="productPages/productMain/productMain.js?v=1.1"></script> <script src="productPages/productMain/productMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>
views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- LNG HERO SECTION --> <!-- LNG HERO SECTION -->
<section class="lng-hero"> <section class="lng-hero">
<div class="container"> <div class="container">
@@ -142,6 +145,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script> <script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PNG HERO SECTION --> <!-- PNG HERO SECTION -->
<section class="png-hero"> <section class="png-hero">
<div class="container"> <div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script> <script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- GAS METER HERO SECTION --> <!-- GAS METER HERO SECTION -->
<section class="gas-meter-hero"> <section class="gas-meter-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script> <script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRU HERO SECTION --> <!-- PRU HERO SECTION -->
<section class="pru-hero"> <section class="pru-hero">
<div class="container"> <div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script> <script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRESSURE REGULATOR VALVE HERO SECTION --> <!-- PRESSURE REGULATOR VALVE HERO SECTION -->
<section class="valve-hero"> <section class="valve-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script> <script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- VAPORIZER HERO SECTION --> <!-- VAPORIZER HERO SECTION -->
<section class="vaporizer-hero"> <section class="vaporizer-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script> <script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script>
</body> </body>
views/servicePages/serviceMain.html
+3 -56
View File
@@ -26,62 +26,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- SERVICE HERO SECTION --> <!-- SERVICE HERO SECTION -->
<div class="service-hero"> <div class="service-hero">
@@ -321,6 +267,7 @@
<script src="servicePages/serviceMain.js?v=1.2"></script> <script src="servicePages/serviceMain.js?v=1.2"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>