hiepht/PresentCorpo
0
0
Fork 0
forked from MinhQuan/PresentCorpo
Code Pull Requests Activity

init

Browse Source
This commit is contained in:
MinhQuan
2026-06-03 01:06:32 +07:00
commit 31d30434d6
72 changed files with 11912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/productPages/productMain/productMain.css
+475
View File
@@ -0,0 +1,475 @@
/* views/productPages/productMain/productMain.css */
/* GENERAL STYLES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* Ensure visited links don't turn purple */
a:visited {
color: inherit;
}
/* Optional: Keep hover state consistent */
a:hover {
text-decoration: none;
color: inherit;
}
/* Optional: Keep active state consistent */
a:active {
color: inherit;
}
/* PRODUCT PAGE SPECIFIC STYLES */
/* Additional styles for symbol placeholders */
.product-image-placeholder {
width: 100%;
height: 200px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
color: #30875f;
}
.shop-product-card .product-image {
position: relative;
height: 200px;
overflow: hidden;
}
.symbol-hero {
position: relative;
width: 100%;
height: 300px;
background-color: #30875f;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
overflow: hidden;
}
.symbol-container {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.symbol-container i {
font-size: 60px;
opacity: 0.7;
transition: all 0.3s ease;
animation: float 5s infinite ease-in-out;
}
.symbol-container i:nth-child(1) {
animation-delay: 0s;
}
.symbol-container i:nth-child(2) {
animation-delay: 0.5s;
}
.symbol-container i:nth-child(3) {
animation-delay: 1s;
}
.symbol-container i:nth-child(4) {
animation-delay: 1.5s;
}
.symbol-container i:nth-child(5) {
animation-delay: 2s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.symbol-container i:hover {
opacity: 1;
transform: scale(1.2);
animation: none;
}
.hero-text h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero-text p {
font-size: 20px;
max-width: 600px;
margin: 0 auto;
}
.product-categories {
padding: 60px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.category-tabs {
display: flex;
justify-content: center;
margin-bottom: 40px;
border-bottom: 1px solid #ddd;
}
.category-tab {
padding: 15px 30px;
background: none;
border: none;
border-bottom: 3px solid transparent;
font-size: 18px;
font-weight: bold;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.category-tab:hover {
color: #e84e0f;
}
.category-tab.active {
color: #e84e0f;
border-bottom: 3px solid #e84e0f;
}
.category-tab i {
font-size: 20px;
}
.category-content {
display: none;
}
.category-content.active {
display: block;
}
.product-card {
display: flex;
margin-bottom: 30px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.product-icon {
width: 100px;
min-width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
color: #30875f;
font-size: 40px;
}
.product-info {
flex: 1;
padding: 20px;
}
.product-info h3 {
color: #30875f;
margin-bottom: 15px;
font-size: 20px;
}
.product-info p {
line-height: 1.6;
color: #666;
}
.contact-cta {
background-color: #30875f;
color: white;
padding: 60px 0;
text-align: center;
}
.contact-cta h2 {
font-size: 32px;
margin-bottom: 20px;
}
.contact-cta p {
font-size: 18px;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
background-color: #e84e0f;
color: white;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
transition: all 0.3s ease;
}
.cta-button:hover {
background-color: #d0450d;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* NEW SHOP STYLES */
.shop-title {
font-size: 28px;
color: #30875f;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
}
.shop-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.shop-product-card {
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background: white;
}
.shop-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.product-image {
position: relative;
height: 250px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.shop-product-card:hover .product-image img {
transform: scale(1.05);
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
background-color: #e84e0f;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
}
.shop-product-info {
padding: 25px;
}
.shop-product-info h3 {
font-size: 22px;
margin-bottom: 15px;
color: #30875f;
}
.product-description {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.product-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 25px;
}
.product-features span {
display: flex;
align-items: center;
gap: 8px;
color: #555;
}
.product-features i {
color: #30875f;
}
.product-link {
display: inline-block;
background-color: #30875f;
color: white !important;
padding: 12px 25px;
border-radius: 25px;
font-weight: bold;
transition: all 0.3s ease;
text-align: center;
}
.product-link:hover {
background-color: #e84e0f;
transform: translateY(-2px);
}
.other-products {
background-color: #f9f9f9;
padding: 30px;
border-radius: 10px;
margin-top: 40px;
}
.other-products h3 {
color: #30875f;
font-size: 22px;
margin-bottom: 20px;
text-align: center;
}
.service-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.service-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.service-item i {
font-size: 24px;
color: #e84e0f;
}
.service-item p {
font-size: 14px;
color: #555;
}
/* Responsive styles */
@media (max-width: 768px) {
.symbol-hero {
height: auto;
padding: 30px 20px;
}
.symbol-container i {
font-size: 40px;
}
.hero-text h1 {
font-size: 36px;
}
.hero-text p {
font-size: 18px;
}
.category-tabs {
flex-direction: column;
}
.category-tab {
border-bottom: none;
border-left: 3px solid transparent;
text-align: left;
justify-content: flex-start;
}
.category-tab.active {
border-bottom: none;
border-left: 3px solid #e84e0f;
}
.product-card {
flex-direction: column;
}
.product-icon {
width: 100%;
height: 80px;
}
.shop-container {
grid-template-columns: 1fr;
}
.service-list {
grid-template-columns: 1fr;
}
.product-image {
height: 200px;
}
.shop-product-info h3 {
font-size: 20px;
}
}
views/productPages/productMain/productMain.html
+488
View File
@@ -0,0 +1,488 @@
<!-- views/productPage/productMain.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SẢN PHẨM - CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link href="/components/header/header.css?v=1.1" rel="stylesheet" />
<link rel="stylesheet" href="components/footer/footer.css" />
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
</head>
<body>
<!-- Header Component -->
<div class="top-ribbon">
<div class="container-fluid px-4">
<div class="ribbon-content">
<div class="ribbon-company-info">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="ribbon-logo"
/>
<span class="ribbon-company-name">KỲ LONG</span>
<span>Thắp sáng tương lai, vững bền thành quả</span>
</div>
</div>
</div>
</div>
<!-- Header Section -->
<header class="header py-3">
<div class="container-fluid px-4">
<div class="row align-items-center">
<!-- Logo and Company Info -->
<div class="col-lg-6 col-md-6 col-12">
<div class="d-flex align-items-center">
<button class="mobile-menu-btn me-3">
<i class="bi bi-list"></i>
</button>
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="logo me-3"
/>
<div class="company-info">
<div>
<a
href="/"
title="Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long"
class="company-name"
>
CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
</a>
</div>
<div class="company-slogan">
Thắp sáng tương lai, vững bền thành quả
</div>
<div class="company-year">SINCE 2010</div>
</div>
</div>
</div>
<!-- Contact Info - Horizontal Layout -->
<div class="col-lg-6 col-md-6 col-12 contact-section">
<div class="row g-3">
<!-- Address -->
<div class="col-md-6 col-12">
<div class="d-flex align-items-center">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div class="contact-text">
<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>
<!-- Email -->
<div class="col-md-6 col-12">
<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 class="contact-text">
<div>Email:</div>
<div class="contact-text">info@kylongtech.com</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Navigation Section -->
<nav class="nav-container">
<div class="container-fluid px-4">
<div class="navbar-nav d-flex flex-row justify-content-around py-3">
<a href="/" class="nav-link" id="home">TRANG CHỦ</a>
<span class="separator"></span>
<a href="/aboutMain" class="nav-link" id="about">GIỚI THIỆU</a>
<span class="separator"></span>
<a href="/productMain" class="nav-link" id="products">SẢN PHẨM</a>
<span class="separator"></span>
<a href="/serviceMain" class="nav-link" id="services">DỊCH VỤ</a>
<span class="separator"></span>
<a href="/newsMain" class="nav-link" id="news">TIN TỨC</a>
<span class="separator"></span>
<a href="/lien-he" class="nav-link" id="contact">LIÊN HỆ</a>
</div>
</div>
</nav>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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="/lien-he" 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 -->
<div class="symbol-hero">
<div class="symbol-container">
<i class="fas fa-industry"></i>
<i class="fas fa-gas-pump"></i>
<i class="fas fa-fire"></i>
<i class="fas fa-truck"></i>
<i class="fas fa-boxes"></i>
</div>
<div class="hero-text">
<h1>SẢN PHẨM</h1>
<p>Các giải pháp năng lượng và thiết bị công nghiệp chất lượng cao</p>
</div>
</div>
<!-- END PRODUCT HERO SECTION -->
<!-- PRODUCT CATEGORIES SECTION -->
<section class="product-categories">
<div class="container">
<div class="category-tabs">
<button class="category-tab active" data-category="production">
<i class="fas fa-industry"></i> SẢN XUẤT
</button>
<button class="category-tab" data-category="commerce">
<i class="fas fa-store"></i> THƯƠNG MẠI
</button>
</div>
<div class="category-content active" id="production">
<h2 class="shop-title">Thiết bị công nghiệp</h2>
<div class="shop-container">
<!-- PRU Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-gauge"></i>
</div>
<div class="product-badge">Chất lượng cao</div>
</div>
<div class="shop-product-info">
<h3>Trạm giảm áp (PRU)</h3>
<p class="product-description">
Trạm giảm áp chất lượng cao, đáp ứng các tiêu chuẩn an toàn
khắt khe nhất của ngành công nghiệp
</p>
<div class="product-features">
<span
><i class="fas fa-check-circle"></i> Độ tin cậy cao</span
>
<span
><i class="fas fa-check-circle"></i> Dễ dàng vận hành</span
>
<span
><i class="fas fa-check-circle"></i> Tính năng an toàn vượt
trội</span
>
</div>
<a href="/productSeparateProductionPRU" class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
<!-- Đồng hồ đo Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-tachometer-alt"></i>
</div>
<div class="product-badge">Chính xác</div>
</div>
<div class="shop-product-info">
<h3>Đồng hồ đo khí</h3>
<p class="product-description">
Thiết bị đo lường chính xác cao, giúp kiểm soát và theo dõi
lượng khí tiêu thụ một cách hiệu quả
</p>
<div class="product-features">
<span
><i class="fas fa-check-circle"></i> Độ chính xác cao</span
>
<span
><i class="fas fa-check-circle"></i> Độ bền vượt trội</span
>
<span
><i class="fas fa-check-circle"></i> Dễ dàng tích hợp</span
>
</div>
<a
href="/productSeparateProductionGasMeter"
class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
</div>
<div class="shop-container">
<!-- Dàn hóa hơi Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-wind"></i>
</div>
<div class="product-badge">Tiết kiệm</div>
</div>
<div class="shop-product-info">
<h3>Dàn hóa hơi</h3>
<p class="product-description">
Thiết bị chuyển đổi khí từ dạng lỏng sang dạng hơi một cách
hiệu quả, tiết kiệm năng lượng
</p>
<div class="product-features">
<span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
<span
><i class="fas fa-check-circle"></i> Tiết kiệm năng
lượng</span
>
<span
><i class="fas fa-check-circle"></i> Vận hành ổn định</span
>
</div>
<a
href="/productSeparateProductionVaporizer"
class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
<!-- Van điều áp Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-compress-alt"></i>
</div>
<div class="product-badge">An toàn</div>
</div>
<div class="shop-product-info">
<h3>Van điều áp</h3>
<p class="product-description">
Van điều áp chất lượng cao, đảm bảo an toàn và hiệu quả trong
việc kiểm soát áp suất khí
</p>
<div class="product-features">
<span><i class="fas fa-check-circle"></i> Độ bền cao</span>
<span
><i class="fas fa-check-circle"></i> Phản ứng nhanh</span
>
<span
><i class="fas fa-check-circle"></i> Dễ dàng bảo trì</span
>
</div>
<a
href="/productSeparateProductionPressureRegulatorValve"
class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
</div>
<div class="other-products">
<h3>Dịch vụ sản xuất khác</h3>
<div class="service-list">
<div class="service-item">
<i class="fas fa-oil-can"></i>
<p>Sản xuất sản phẩm dầu mỏ tinh chế</p>
</div>
<div class="service-item">
<i class="fas fa-fire"></i>
<p>Sản xuất, phân phối khí đốt bằng đường ống</p>
</div>
<div class="service-item">
<i class="fas fa-water"></i>
<p>Sản xuất, phân phối hơi nước và nước nóng</p>
</div>
<div class="service-item">
<i class="fas fa-tools"></i>
<p>Bảo trì, sửa chữa thiết bị công nghiệp</p>
</div>
</div>
</div>
</div>
<div class="category-content" id="commerce">
<h2 class="shop-title">Sản phẩm nổi bật</h2>
<div class="shop-container">
<!-- LNG Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-tint"></i>
</div>
<div class="product-badge">Phổ biến</div>
</div>
<div class="shop-product-info">
<h3>Khí tự nhiên hóa lỏng (LNG)</h3>
<p class="product-description">
Giải pháp năng lượng sạch, hiệu quả cao và tiết kiệm chi phí
cho doanh nghiệp
</p>
<div class="product-features">
<span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
<span
><i class="fas fa-check-circle"></i> Thân thiện môi
trường</span
>
<span
><i class="fas fa-check-circle"></i> Vận chuyển linh
hoạt</span
>
</div>
<a href="/productSeparateCommerceLNG" class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
<!-- PNG Product Card -->
<div class="shop-product-card">
<div class="product-image">
<div class="product-image-placeholder">
<i class="fas fa-fire"></i>
</div>
<div class="product-badge">Tiết kiệm</div>
</div>
<div class="shop-product-info">
<h3>Khí tự nhiên nén (PNG)</h3>
<p class="product-description">
Giải pháp cung cấp năng lượng liên tục qua đường ống cho nhà
máy và khu công nghiệp
</p>
<div class="product-features">
<span
><i class="fas fa-check-circle"></i> Cung cấp liên tục</span
>
<span
><i class="fas fa-check-circle"></i> Không cần bồn
chứa</span
>
<span
><i class="fas fa-check-circle"></i> Chi phí vận hành
thấp</span
>
</div>
<a href="/productSeparateCommercePNG" class="product-link"
>XEM CHI TIẾT</a
>
</div>
</div>
</div>
<div class="other-products">
<h3>Dịch vụ thương mại khác</h3>
<div class="service-list">
<div class="service-item">
<i class="fas fa-truck"></i>
<p>Bán buôn ô tô và xe có động cơ khác</p>
</div>
<div class="service-item">
<i class="fas fa-handshake"></i>
<p>Đại lý bán hàng hóa; Môi giới mua bán hàng hóa</p>
</div>
<div class="service-item">
<i class="fas fa-cubes"></i>
<p>Bán buôn sắt, thép, bạc và kim loại khác</p>
</div>
<div class="service-item">
<i class="fas fa-hammer"></i>
<p>Bán buôn vật liệu, thiết bị lắp đặt khác trong xây dựng</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END PRODUCT CATEGORIES SECTION -->
<!-- CONTACT CTA SECTION -->
<section class="contact-cta">
<div class="container">
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ SẢN PHẨM?</h2>
<p>
Đội ngũ chuyên gia của chúng tôi sẵn sàng hỗ trợ bạn lựa chọn giải
pháp phù hợp nhất
</p>
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
</div>
</section>
<!-- END CONTACT CTA SECTION -->
<!-- Footer Component -->
<div id="footer"></div>
<script src="productPages/productMain/productMain.js"></script>
<script src="/components/header/header.js"></script>
</body>
</html>
views/productPages/productMain/productMain.js
+63
View File
@@ -0,0 +1,63 @@
////views/productPages/productMain/productMain.js
// Load footer
fetch("components/footer/footer.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("footer").innerHTML = data;
});
// Product page specific JavaScript
document.addEventListener("DOMContentLoaded", function () {
// Tab functionality for product categories
const categoryTabs = document.querySelectorAll(".category-tab");
const categoryContents = document.querySelectorAll(".category-content");
categoryTabs.forEach((tab) => {
tab.addEventListener("click", function () {
// Remove active class from all tabs and contents
categoryTabs.forEach((t) => t.classList.remove("active"));
categoryContents.forEach((c) => c.classList.remove("active"));
// Add active class to clicked tab
this.classList.add("active");
// Show corresponding content
const categoryId = this.getAttribute("data-category");
document.getElementById(categoryId).classList.add("active");
// Update URL hash without jumping
history.pushState(null, null, `#${categoryId}`);
});
});
// Handle hash navigation from footer or direct links
function activateTabByHash() {
const hash = window.location.hash.substring(1); // Remove the #
if (hash) {
// Find the tab with matching data-category
const tab = document.querySelector(
`.category-tab[data-category="${hash}"]`
);
if (tab) {
// Remove active class from all tabs and contents
categoryTabs.forEach((t) => t.classList.remove("active"));
categoryContents.forEach((c) => c.classList.remove("active"));
// Add active class to the appropriate tab and content
tab.classList.add("active");
document.getElementById(hash).classList.add("active");
}
}
}
// Check hash on page load
activateTabByHash();
// Listen for hash changes
window.addEventListener("hashchange", activateTabByHash);
// Set products nav item as active
if (document.getElementById("products")) {
document.getElementById("products").classList.add("active");
}
});