hiep200311
9c07af001c
- 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)"
154 lines
5.5 KiB
HTML
154 lines
5.5 KiB
HTML
<!-- views\contactPages\contactMain.html -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Liên Hệ - 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="contactPages/contactMain.css" />
|
|
</head>
|
|
<link
|
|
rel="preload"
|
|
href="components/header/header.html"
|
|
as="fetch"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<body>
|
|
<!-- Header Component -->
|
|
<div id="header"></div>
|
|
|
|
<!-- Sidebar Component -->
|
|
<div id="sidebar-container"></div>
|
|
|
|
<!----- CONTACT PAGE CONTENT ----->
|
|
<section class="contact-section container py-5 my-3 overflow-hidden">
|
|
<h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
|
|
|
|
<div class="contact-container row g-4 g-lg-5">
|
|
<div class="col-12 col-md-6 mb-4 mb-md-0">
|
|
<div class="contact-form h-100">
|
|
<h2>Gửi tin nhắn cho chúng tôi</h2>
|
|
|
|
<!-- Optional: Progress bar to show form completion -->
|
|
<div class="form-progress">
|
|
<div class="form-progress-bar"></div>
|
|
</div>
|
|
|
|
<form action="/contactSubmit" method="POST" id="contactForm">
|
|
<div class="form-group">
|
|
<label for="name" class="required">Họ và tên</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Nhập họ và tên của bạn"
|
|
required
|
|
/>
|
|
<div class="error-message">Vui lòng nhập họ và tên của bạn</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" class="required">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Nhập địa chỉ email của bạn"
|
|
required
|
|
/>
|
|
<div class="error-message">
|
|
Vui lòng nhập một địa chỉ email hợp lệ
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone" class="required">Số điện thoại</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
placeholder="Nhập số điện thoại của bạn"
|
|
required
|
|
/>
|
|
<div class="error-message">
|
|
Vui lòng nhập số điện thoại của bạn
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message" class="required">Nội dung</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
placeholder="Nhập nội dung tin nhắn của bạn"
|
|
rows="5"
|
|
required
|
|
></textarea>
|
|
<div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button">Gửi tin nhắn</button>
|
|
</form>
|
|
|
|
<!-- Container for success/error messages -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<div class="contact-details h-100">
|
|
<h2>Thông tin liên hệ</h2>
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="fas fa-phone-alt"></i>
|
|
<p>+84 96 227 7912</p>
|
|
</div>
|
|
<div class="contact-item">
|
|
<i class="fas fa-envelope"></i>
|
|
<p>info@kylongtech.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="map-container">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s"
|
|
class="w-100"
|
|
height="300"
|
|
style="border: 0"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Component -->
|
|
<div id="footer"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/components/header/headerLoader.js"></script>
|
|
<script src="/components/sidebar/sidebarLoader.js"></script>
|
|
<script src="/components/footer/footerLoader.js"></script>
|
|
<script src="contactPages/contactMain.js?v=1.1"></script>
|
|
</body>
|
|
</html>
|