forked from MinhQuan/PresentCorpo
init
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
/* views\newsPage\newsMain\newsMain.css */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* NEWS SECTION CSS */
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #006241;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-title:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background-color: #e84e0f;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.news-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 16px;
|
||||
margin: 0 10px;
|
||||
background-color: #fff;
|
||||
color: #006241;
|
||||
border: 1px solid #30875f;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.filter-btn.active {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.news-thumbnail {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-card:hover .news-thumbnail img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.news-category {
|
||||
display: inline-block;
|
||||
background-color: #e84e0f;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
color: #006241;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news-date i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.news-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 5px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #006241;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover,
|
||||
.page-btn.active {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
border-color: #30875f;
|
||||
}
|
||||
/* END OF NEWS SECTION CSS */
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 992px) {
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
<!-- views\newsPage\newsMain\newsMain.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tin Tức - 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="newsPages/newsMain/newsMain.css" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<!-- NEWS CONTENT SECTION -->
|
||||
<main class="news-container">
|
||||
<h1 class="page-title">Tin Tức & Sự Kiện</h1>
|
||||
|
||||
<div class="news-filter">
|
||||
<button class="filter-btn active">Tất Cả</button>
|
||||
<button class="filter-btn">Công Nghệ</button>
|
||||
<button class="filter-btn">Thị Trường</button>
|
||||
<button class="filter-btn">Doanh Nghiệp</button>
|
||||
<button class="filter-btn">Hoạt Động</button>
|
||||
</div>
|
||||
|
||||
<div class="news-grid">
|
||||
<!-- News Item 1 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Thị Trường</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 05/03/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 2 -->
|
||||
<a href="/newsArticle2" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/0MGOlmy.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Công Nghệ</span>
|
||||
<h3 class="news-title">Khí đốt tự nhiên được khai thác từ đâu?</h3>
|
||||
<p class="news-excerpt">
|
||||
Bạn có bao giờ thắc mắc: Khí đốt tự nhiên được khai thác từ đâu?
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 28/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 3 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Thị Trường</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 20/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 4 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 15/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 5 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Công Nghệ</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 08/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 6 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 7 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 8 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 9 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="news-pagination">
|
||||
<!-- Pagination buttons will be generated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="no-results"
|
||||
style="display: none; text-align: center; padding: 2rem; width: 100%"
|
||||
>
|
||||
<p>Không có tin tức nào phù hợp với bộ lọc đã chọn.</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- END OF NEWS CONTENT SECTION -->
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="newsPages/newsMain/newsMain.js"></script>
|
||||
<script src="/components/header/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
///// views\newsPage\newsMain\newsMain.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
//// NEWS FILTER JS
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get all filter buttons and news cards
|
||||
const filterButtons = document.querySelectorAll(".filter-btn");
|
||||
const newsCards = document.querySelectorAll(".news-card");
|
||||
|
||||
// Add click event listeners to each filter button
|
||||
filterButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all buttons
|
||||
filterButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// Get the category to filter by (button text)
|
||||
const filterCategory = this.textContent.trim();
|
||||
|
||||
// Show all news cards if "Tất Cả" is selected, otherwise filter
|
||||
if (filterCategory === "Tất Cả") {
|
||||
newsCards.forEach((card) => {
|
||||
card.style.display = "block";
|
||||
});
|
||||
} else {
|
||||
// Filter news cards by category
|
||||
newsCards.forEach((card) => {
|
||||
const cardCategory = card
|
||||
.querySelector(".news-category")
|
||||
.textContent.trim();
|
||||
if (cardCategory === filterCategory) {
|
||||
card.style.display = "block";
|
||||
} else {
|
||||
card.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add click event listeners to pagination buttons
|
||||
const pageButtons = document.querySelectorAll(".page-btn");
|
||||
pageButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all page buttons
|
||||
pageButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// In a real application, you would load different news items here
|
||||
// For demonstration, we'll just scroll to top
|
||||
window.scrollTo({
|
||||
top: document.querySelector(".news-container").offsetTop - 100,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
//// END OF NEWS FILTER JS
|
||||
|
||||
//// PAGINATION JS
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get all filter buttons and news cards
|
||||
const filterButtons = document.querySelectorAll(".filter-btn");
|
||||
const newsCards = document.querySelectorAll(".news-card");
|
||||
const paginationContainer = document.querySelector(".news-pagination");
|
||||
|
||||
// Pagination settings
|
||||
const itemsPerPage = 6;
|
||||
let currentPage = 1;
|
||||
let filteredItems = [...newsCards]; // Start with all items
|
||||
|
||||
// Initialize page
|
||||
function initializePage() {
|
||||
// Clear existing pagination
|
||||
paginationContainer.innerHTML = "";
|
||||
|
||||
// Show items for current page and category filter
|
||||
updateDisplay();
|
||||
|
||||
// Create pagination buttons
|
||||
createPaginationButtons();
|
||||
}
|
||||
|
||||
// Update which items are displayed based on current page and filters
|
||||
function updateDisplay() {
|
||||
// Hide all news items first
|
||||
newsCards.forEach((card) => {
|
||||
card.style.display = "none";
|
||||
});
|
||||
|
||||
// Show only the items for current page
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
|
||||
filteredItems.slice(startIndex, endIndex).forEach((card) => {
|
||||
card.style.display = "block";
|
||||
});
|
||||
|
||||
// Show "no results" message if needed
|
||||
const noResultsElement = document.querySelector(".no-results");
|
||||
if (noResultsElement) {
|
||||
if (filteredItems.length === 0) {
|
||||
noResultsElement.style.display = "block";
|
||||
} else {
|
||||
noResultsElement.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create pagination buttons
|
||||
function createPaginationButtons() {
|
||||
const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
|
||||
|
||||
// Previous button
|
||||
if (currentPage > 1) {
|
||||
const prevBtn = document.createElement("button");
|
||||
prevBtn.className = "page-btn";
|
||||
prevBtn.innerHTML = "<"; // < symbol
|
||||
prevBtn.addEventListener("click", () => {
|
||||
currentPage--;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(prevBtn);
|
||||
}
|
||||
|
||||
// Page number buttons
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const pageBtn = document.createElement("button");
|
||||
pageBtn.className = "page-btn";
|
||||
if (i === currentPage) {
|
||||
pageBtn.classList.add("active");
|
||||
}
|
||||
pageBtn.textContent = i;
|
||||
pageBtn.addEventListener("click", () => {
|
||||
currentPage = i;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(pageBtn);
|
||||
}
|
||||
|
||||
// Next button
|
||||
if (currentPage < totalPages) {
|
||||
const nextBtn = document.createElement("button");
|
||||
nextBtn.className = "page-btn";
|
||||
nextBtn.innerHTML = ">"; // > symbol
|
||||
nextBtn.addEventListener("click", () => {
|
||||
currentPage++;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(nextBtn);
|
||||
}
|
||||
|
||||
// If no pages, show a disabled "1" button
|
||||
if (totalPages === 0) {
|
||||
const emptyBtn = document.createElement("button");
|
||||
emptyBtn.className = "page-btn active";
|
||||
emptyBtn.textContent = "1";
|
||||
emptyBtn.disabled = true;
|
||||
paginationContainer.appendChild(emptyBtn);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the page after changing page or filter
|
||||
function updatePage() {
|
||||
updateDisplay();
|
||||
|
||||
// Recreate pagination buttons
|
||||
paginationContainer.innerHTML = "";
|
||||
createPaginationButtons();
|
||||
|
||||
// Scroll to top of news section
|
||||
window.scrollTo({
|
||||
top: document.querySelector(".news-container").offsetTop - 100,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
// Add click event listeners to each filter button
|
||||
filterButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all buttons
|
||||
filterButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// Get the category to filter by (button text)
|
||||
const filterCategory = this.textContent.trim();
|
||||
|
||||
// Filter the items based on category
|
||||
if (filterCategory === "Tất Cả") {
|
||||
filteredItems = [...newsCards];
|
||||
} else {
|
||||
filteredItems = [...newsCards].filter((card) => {
|
||||
const cardCategory = card
|
||||
.querySelector(".news-category")
|
||||
.textContent.trim();
|
||||
return cardCategory === filterCategory;
|
||||
});
|
||||
}
|
||||
|
||||
// Reset to first page when filter changes
|
||||
currentPage = 1;
|
||||
updatePage();
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize the page when the DOM is loaded
|
||||
initializePage();
|
||||
});
|
||||
//// PAGINATION JS
|
||||
Reference in New Issue
Block a user