forked from MinhQuan/PresentCorpo
204 lines
6.9 KiB
HTML
204 lines
6.9 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>
|
|
|
|
<!-- 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="/contactMain" 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>
|
|
|
|
<!----- CONTACT PAGE CONTENT ----->
|
|
<section class="contact-section">
|
|
<h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
|
|
|
|
<div class="contact-container">
|
|
<div class="contact-form">
|
|
<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 id="form-messages"></div>
|
|
</div>
|
|
|
|
<div class="contact-details">
|
|
<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"
|
|
width="100%"
|
|
height="300"
|
|
style="border: 0"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Component -->
|
|
<div id="footer"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/components/header/headerLoader.js"></script>
|
|
<script src="/components/footer/footerLoader.js"></script>
|
|
<script src="contactPages/contactMain.js?v=1.0"></script>
|
|
</body>
|
|
</html>
|