forked from MinhQuan/PresentCorpo
init
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.css */
|
||||
/* Additional styles for LNG page */
|
||||
.lng-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lng-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.lng-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lng-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.lng-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.lng-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.lng-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.lng-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lng-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.lng-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.lng-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.lng-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.lng-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.lng-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lng-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
<!-- views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
LNG - Khí tự nhiên hóa lỏng | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ
|
||||
LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- LNG HERO SECTION -->
|
||||
<section class="lng-hero">
|
||||
<div class="container">
|
||||
<h1>KHÍ TỰ NHIÊN HÓA LỎNG (LNG)</h1>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- LNG CONTENT SECTION -->
|
||||
<section class="lng-content">
|
||||
<div class="container">
|
||||
<div class="lng-details">
|
||||
<div class="lng-image">
|
||||
<i class="fas fa-tint"></i>
|
||||
</div>
|
||||
<div class="lng-info">
|
||||
<h2>Giới thiệu sản phẩm LNG</h2>
|
||||
<p>
|
||||
Khí tự nhiên hóa lỏng (Liquefied Natural Gas - LNG) là khí thiên
|
||||
nhiên được làm lạnh sâu đến -162°C để chuyển sang thể lỏng, giúp
|
||||
giảm thể tích khoảng 600 lần so với trạng thái khí, thuận tiện cho
|
||||
việc vận chuyển và lưu trữ.
|
||||
</p>
|
||||
|
||||
<div class="lng-features">
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Hiệu suất cao</h4>
|
||||
<p>
|
||||
Năng lượng tập trung, hiệu quả sử dụng vượt trội so với các
|
||||
nhiên liệu truyền thống
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-leaf"></i>
|
||||
<div>
|
||||
<h4>Thân thiện môi trường</h4>
|
||||
<p>
|
||||
Giảm 20-30% lượng khí thải CO2 so với dầu FO và giảm 100%
|
||||
khí thải SOx
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-truck-moving"></i>
|
||||
<div>
|
||||
<h4>Vận chuyển linh hoạt</h4>
|
||||
<p>
|
||||
Có thể vận chuyển bằng xe bồn chuyên dụng hoặc tàu LNG mà
|
||||
không cần đường ống
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Thành phần chính</h4>
|
||||
<p>
|
||||
Methane (CH4) chiếm 85-95%, còn lại là Ethane, Propane và các
|
||||
hydrocarbon khác
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Nhiệt độ bảo quản</h4>
|
||||
<p>-162°C ở áp suất khí quyển</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tỷ trọng</h4>
|
||||
<p>0.41 - 0.5 kg/lít (khoảng 45% so với nước)</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Giá trị nhiệt</h4>
|
||||
<p>22,000 - 24,000 BTU/lb (khoảng 52-55 MJ/kg)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 LNG?</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>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
////views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
/* views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.css */
|
||||
/* Additional styles for PNG page */
|
||||
.png-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.png-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.png-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.png-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.png-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.png-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.png-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.png-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.png-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.png-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.png-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.png-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.png-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.png-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.png-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.pipeline-icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
PNG - Khí tự nhiên nén | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateCommercePNG/productSeparateCommercePNG.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PNG HERO SECTION -->
|
||||
<section class="png-hero">
|
||||
<div class="container">
|
||||
<h1>KHÍ TỰ NHIÊN NÉN (PNG)</h1>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- PNG CONTENT SECTION -->
|
||||
<section class="png-content">
|
||||
<div class="container">
|
||||
<div class="png-details">
|
||||
<div class="png-image">
|
||||
<i class="fas fa-fire"></i>
|
||||
</div>
|
||||
<div class="png-info">
|
||||
<h2>Giới thiệu sản phẩm PNG</h2>
|
||||
<p>
|
||||
Khí tự nhiên nén (Pipeline Natural Gas - PNG) là khí thiên nhiên
|
||||
được cung cấp trực tiếp qua hệ thống đường ống đến các điểm sử
|
||||
dụng. Đây là giải pháp tối ưu cho các doanh nghiệp có nhu cầu sử
|
||||
dụng khí đốt ổn định với khối lượng lớn.
|
||||
</p>
|
||||
|
||||
<div class="png-features">
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Cung cấp liên tục</h4>
|
||||
<p>
|
||||
Không cần lưu trữ nhiên liệu tại chỗ, đảm bảo nguồn cung ổn
|
||||
định 24/7
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-pipe"></i>
|
||||
<div>
|
||||
<h4>Không cần bồn chứa</h4>
|
||||
<p>
|
||||
Tiết kiệm diện tích và chi phí đầu tư cơ sở hạ tầng lưu trữ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-coins"></i>
|
||||
<div>
|
||||
<h4>Chi phí vận hành thấp</h4>
|
||||
<p>
|
||||
Giảm chi phí vận chuyển và tổn thất năng lượng so với các
|
||||
dạng nhiên liệu khác
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Thành phần chính</h4>
|
||||
<p>
|
||||
Methane (CH4) chiếm 90-98%, còn lại là Ethane, Propane và các
|
||||
hydrocarbon khác
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Áp suất vận hành</h4>
|
||||
<p>2 - 24 bar tùy theo hệ thống đường ống</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Nhiệt trị</h4>
|
||||
<p>9,000 - 11,000 kcal/m³ (khoảng 37-46 MJ/m³)</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Độ tinh khiết</h4>
|
||||
<p>≥ 95% methane, hàm lượng lưu huỳnh < 5mg/m³</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 PNG?</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>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
////views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.css */
|
||||
/* Additional styles for Gas Meter page */
|
||||
.gas-meter-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gas-meter-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.gas-meter-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gas-meter-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.gas-meter-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.gas-meter-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.gas-meter-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gas-meter-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.gas-meter-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.gas-meter-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.gas-meter-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.gas-meter-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.gas-meter-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gas-meter-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gas-meter-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Đồng Hồ Đo Khí | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- GAS METER HERO SECTION -->
|
||||
<section class="gas-meter-hero">
|
||||
<div class="container">
|
||||
<h1>ĐỒNG HỒ ĐO KHÍ</h1>
|
||||
<p>
|
||||
Giải pháp đo lường chính xác lưu lượng khí cho công nghiệp và dân dụng
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GAS METER CONTENT SECTION -->
|
||||
<section class="gas-meter-content">
|
||||
<div class="container">
|
||||
<div class="gas-meter-details">
|
||||
<div class="gas-meter-image">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
</div>
|
||||
<div class="gas-meter-info">
|
||||
<h2>Giới thiệu sản phẩm đồng hồ đo khí</h2>
|
||||
<p>
|
||||
Đồng hồ đo khí là thiết bị quan trọng dùng để đo lường chính xác
|
||||
lưu lượng khí trong các hệ thống công nghiệp và dân dụng. Sản phẩm
|
||||
của chúng tôi được thiết kế đảm bảo độ chính xác cao, bền bỉ, phù
|
||||
hợp với nhiều loại khí và môi trường làm việc khác nhau.
|
||||
</p>
|
||||
|
||||
<div class="gas-meter-features">
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Độ chính xác cao</h4>
|
||||
<p>
|
||||
Cung cấp kết quả đo lường chính xác, ổn định trong nhiều
|
||||
điều kiện làm việc khác nhau với sai số tối thiểu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div>
|
||||
<h4>Tuổi thọ cao và bảo trì thấp</h4>
|
||||
<p>
|
||||
Thiết kế bền bỉ, chịu được môi trường khắc nghiệt, yêu cầu
|
||||
bảo trì tối thiểu và chu kỳ hiệu chuẩn dài
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-signal"></i>
|
||||
<div>
|
||||
<h4>Tích hợp hệ thống thông minh</h4>
|
||||
<p>
|
||||
Tùy chọn kết nối và truyền dữ liệu từ xa, tích hợp vào hệ
|
||||
thống quản lý và giám sát tự động
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Loại đồng hồ</h4>
|
||||
<p>Turbine, Ultrasonic, Rotary, Diaphragm, Coriolis</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải đo lưu lượng</h4>
|
||||
<p>0.5 - 10,000 m³/h tùy theo model và ứng dụng</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Áp suất làm việc</h4>
|
||||
<p>Từ áp suất thấp đến 40 bar tùy loại đồng hồ</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn chất lượng</h4>
|
||||
<p>EN 12261, OIML R137, MID 2014/32/EU</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ ĐỒNG HỒ ĐO KHÍ?</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 đo lường khí phù hợp nhất cho nhu cầu của bạn
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
/* views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.css */
|
||||
/* Additional styles for PRU page */
|
||||
.pru-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pru-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pru-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pru-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.pru-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.pru-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.pru-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pru-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pru-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pru-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pru-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.pru-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pru-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pru-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pru-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.pipeline-icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
PRU - Pressure Regulating Unit | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ
|
||||
LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionPRU/productSeparateProductionPRU.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PRU HERO SECTION -->
|
||||
<section class="pru-hero">
|
||||
<div class="container">
|
||||
<h1>BỘ ĐIỀU ÁP KHÍ (PRU)</h1>
|
||||
<p>
|
||||
Giải pháp điều chỉnh và ổn định áp suất khí đốt cho hệ thống công
|
||||
nghiệp
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRU CONTENT SECTION -->
|
||||
<section class="pru-content">
|
||||
<div class="container">
|
||||
<div class="pru-details">
|
||||
<div class="pru-image">
|
||||
<i class="fas fa-gauge-high"></i>
|
||||
</div>
|
||||
<div class="pru-info">
|
||||
<h2>Giới thiệu sản phẩm PRU</h2>
|
||||
<p>
|
||||
Bộ điều áp khí (Pressure Regulating Unit - PRU) là thiết bị chuyên
|
||||
dụng được thiết kế để điều chỉnh và duy trì áp suất khí đầu ra ổn
|
||||
định cho các hệ thống khí công nghiệp. PRU đóng vai trò quan trọng
|
||||
trong việc đảm bảo an toàn và hiệu quả cho quy trình sản xuất sử
|
||||
dụng khí đốt.
|
||||
</p>
|
||||
|
||||
<div class="pru-features">
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Điều chỉnh áp suất chính xác</h4>
|
||||
<p>
|
||||
Duy trì áp suất đầu ra ổn định bất kể sự biến động của áp
|
||||
suất đầu vào
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4>Hệ thống bảo vệ tích hợp</h4>
|
||||
<p>
|
||||
Tự động ngắt cung cấp khí trong trường hợp áp suất vượt quá
|
||||
ngưỡng an toàn
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-tools"></i>
|
||||
<div>
|
||||
<h4>Thiết kế bền bỉ, dễ bảo trì</h4>
|
||||
<p>
|
||||
Vật liệu cao cấp, kết cấu chắc chắn với các thành phần dễ
|
||||
dàng kiểm tra và thay thế
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất đầu vào</h4>
|
||||
<p>Từ 5 bar đến 50 bar tùy theo model và cấu hình</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất đầu ra</h4>
|
||||
<p>0.5 - 10 bar, có thể điều chỉnh theo yêu cầu</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Lưu lượng khí</h4>
|
||||
<p>100 - 10,000 Nm³/h tùy theo kích thước</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ISO 4126, ASME B31.8, EN 334</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 PRU?</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 cho nhu cầu điều áp khí
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.css */
|
||||
/* Additional styles for Pressure Regulator Valve page */
|
||||
.valve-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.valve-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.valve-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.valve-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.valve-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.valve-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.valve-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.valve-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.valve-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.valve-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.valve-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.valve-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.valve-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.valve-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.valve-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Van Điều Áp | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PRESSURE REGULATOR VALVE HERO SECTION -->
|
||||
<section class="valve-hero">
|
||||
<div class="container">
|
||||
<h1>VAN ĐIỀU ÁP</h1>
|
||||
<p>
|
||||
Giải pháp điều chỉnh và duy trì áp suất khí ổn định cho hệ thống khí
|
||||
công nghiệp
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRESSURE REGULATOR VALVE CONTENT SECTION -->
|
||||
<section class="valve-content">
|
||||
<div class="container">
|
||||
<div class="valve-details">
|
||||
<div class="valve-image">
|
||||
<i class="fas fa-compress-alt"></i>
|
||||
</div>
|
||||
<div class="valve-info">
|
||||
<h2>Giới thiệu sản phẩm van điều áp</h2>
|
||||
<p>
|
||||
Van điều áp là thiết bị quan trọng trong hệ thống khí công nghiệp,
|
||||
có chức năng điều chỉnh và duy trì áp suất khí đầu ra ổn định dù
|
||||
áp suất đầu vào có thay đổi. Sản phẩm đảm bảo an toàn và hiệu quả
|
||||
cho quy trình sử dụng khí, bảo vệ thiết bị hạ nguồn và tối ưu hóa
|
||||
hiệu suất hệ thống.
|
||||
</p>
|
||||
|
||||
<div class="valve-features">
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4>Độ chính xác cao</h4>
|
||||
<p>
|
||||
Duy trì áp suất đầu ra ổn định với sai số tối thiểu, đảm bảo
|
||||
quy trình sản xuất liên tục và đồng đều
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-toolbox"></i>
|
||||
<div>
|
||||
<h4>Bền bỉ và dễ bảo trì</h4>
|
||||
<p>
|
||||
Thiết kế chắc chắn từ vật liệu cao cấp, dễ dàng tháo lắp và
|
||||
bảo dưỡng định kỳ, tiết kiệm chi phí vận hành
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-sliders"></i>
|
||||
<div>
|
||||
<h4>Đa dạng kích thước và cấu hình</h4>
|
||||
<p>
|
||||
Phù hợp với nhiều ứng dụng khác nhau từ quy mô nhỏ đến công
|
||||
nghiệp lớn, tương thích với nhiều loại khí
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Kích thước kết nối</h4>
|
||||
<p>DN15 - DN300 (1/2" - 12")</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Vật liệu thân van</h4>
|
||||
<p>Thép carbon, thép không gỉ 304/316, đồng thau</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất làm việc</h4>
|
||||
<p>0.05 - 100 bar tùy theo model</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ASME, EN 334, ISO 23551</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ VAN ĐIỀU ÁP?</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 cho hệ thống khí công nghiệp của bạn
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.css */
|
||||
/* Additional styles for Vaporizer page */
|
||||
.vaporizer-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vaporizer-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.vaporizer-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.vaporizer-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.vaporizer-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.vaporizer-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.vaporizer-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vaporizer-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.vaporizer-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.vaporizer-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.vaporizer-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.vaporizer-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.vaporizer-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.vaporizer-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vaporizer-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dàn Hóa Hơi | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- VAPORIZER HERO SECTION -->
|
||||
<section class="vaporizer-hero">
|
||||
<div class="container">
|
||||
<h1>DÀN HÓA HƠI</h1>
|
||||
<p>
|
||||
Giải pháp chuyển đổi khí hóa lỏng thành khí ở trạng thái hơi với hiệu
|
||||
suất cao
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VAPORIZER CONTENT SECTION -->
|
||||
<section class="vaporizer-content">
|
||||
<div class="container">
|
||||
<div class="vaporizer-details">
|
||||
<div class="vaporizer-image">
|
||||
<i class="fas fa-wind"></i>
|
||||
</div>
|
||||
<div class="vaporizer-info">
|
||||
<h2>Giới thiệu sản phẩm dàn hóa hơi</h2>
|
||||
<p>
|
||||
Dàn hóa hơi là thiết bị chuyên dụng được thiết kế để chuyển đổi
|
||||
khí hóa lỏng (LPG, LNG) từ trạng thái lỏng sang trạng thái hơi một
|
||||
cách hiệu quả. Thiết bị đóng vai trò quan trọng trong hệ thống
|
||||
cung cấp khí công nghiệp, đảm bảo nguồn khí liên tục và ổn định
|
||||
cho quy trình sản xuất.
|
||||
</p>
|
||||
|
||||
<div class="vaporizer-features">
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-fire"></i>
|
||||
<div>
|
||||
<h4>Hiệu suất chuyển đổi cao</h4>
|
||||
<p>
|
||||
Khả năng hóa hơi nhanh chóng với lưu lượng ổn định, đáp ứng
|
||||
nhu cầu sử dụng liên tục
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-thermometer-half"></i>
|
||||
<div>
|
||||
<h4>Kiểm soát nhiệt độ chính xác</h4>
|
||||
<p>
|
||||
Hệ thống điều khiển nhiệt thông minh giúp tối ưu hóa quá
|
||||
trình hóa hơi và tiết kiệm năng lượng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<div>
|
||||
<h4>Thiết kế an toàn, dễ vận hành</h4>
|
||||
<p>
|
||||
Tích hợp nhiều cơ chế bảo vệ, tự động điều chỉnh theo điều
|
||||
kiện môi trường và nhu cầu sử dụng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Công suất hóa hơi</h4>
|
||||
<p>50 - 2,000 kg/h tùy theo model và cấu hình</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Phương thức cấp nhiệt</h4>
|
||||
<p>Điện, nước nóng, hơi nước hoặc đốt gián tiếp</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Môi chất làm việc</h4>
|
||||
<p>LPG, LNG, NH3, CO2 và các loại khí công nghiệp khác</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ASME, ISO 23208, EN 12542</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ DÀN HÓA HƠI?</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 cho nhu cầu hóa hơi khí công nghiệp
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user