Files
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

234 lines
8.9 KiB
HTML

<!-- 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 id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- NEWS CONTENT SECTION -->
<main class="news-container">
<h1 class="page-title">Tin Tức & Sự Kiện</h1>
<div
class="news-filter d-flex flex-nowrap overflow-x-auto pb-2 bootstrap-scroll-fix"
>
<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 my-3 my-sm-4">
<!-- Pagination buttons will be generated by JavaScript -->
</div>
<div
class="no-results py-4 py-sm-5 text-center w-100"
style="display: none"
>
<p class="mb-0">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?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
</body>
</html>