Update index.html

lcd/index.html

@@ -1,11 +1,9 @@
 <!--11/05/2024
 
 SỬA CODE HIỂN THỊ LÀ HTML THAY VÌ JSON 
-
-
-
 TĂNG TỐC ĐỘ TẢI TRANG WEB 
 
+OPEN SOURCE
 
 -->
 
@@ -23,14 +21,14 @@
 
 <!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
-<meta property="og:url" content="//hieunotes.tayninhkysu.com/lcd/" />
+<meta property="og:url" content="//hieunotes.pages.dev/lcd/" />
 <meta property="og:title" content="Hieunotes | Lịch Cúp Điện" />
 <meta property="og:description" content="Cập nhật lịch tạm ngừng cung cấp điện Điện lực Tây Ninh mới nhất." />
 <meta property="og:image" content="//s6.imgcdn.dev/W5WJC.png" />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content="//hieunotes.tayninhkysu.com/lcd/" />
+<meta property="twitter:url" content="//hieunotes.pages.dev/lcd/" />
 <meta property="twitter:title" content="Hieunotes | Lịch Cúp Điện" />
 <meta property="twitter:description" content="Cập nhật lịch tạm ngừng cung cấp điện Điện lực Tây Ninh mới nhất." />
 <meta property="twitter:image" content="//s6.imgcdn.dev/W5WJC.png" />
@@ -83,6 +81,44 @@
  tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.1);
  }
+ .form-control:focus {
+ border-color: #28a745;
+ box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+ } 
+
+ .notification {
+ background-color: #f8d7da;
+ color: #721c24;
+ padding: 10px;
+ border: 1px solid #f5c6cb;
+ border-radius: 5px;
+ margin: 10px;
+ }
+
+ .notification .ttl {
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+
+ .notification .red {
+ color: #721c24;
+ }
+
+ .notification .time {
+ font-size: 0.9em;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .notification {
+ background-color: #553355;
+ color: #ffffff;
+ border-color: #331133;
+ }
+
+ .notification .red {
+ color: #ffcccc;
+ }
+ }
 </style>
 
 </head>
@@ -126,7 +162,9 @@
 <!-- DIV của tạo ảnh-->
  <div id="elementToCapture">
  <!-- DIV của tạo ảnh-->
+
 
+<!-- KHU VỰC TABLE LỊCH CÚP ĐIỆN -->
 <section class="col-md-8 mx-auto pt-3">
  <div class="d-flex justify-content-center">
  <button class="btn btn-light btn-sm" id="captureButton">
@@ -141,11 +179,22 @@
 
  <p class="pt-2 text-center text-danger">Gọi ngay tổng đài hỗ trợ điện lực tại số<br><b>1900 1006</b> hoặc <b>1900 9000</b></p>
 </section>
-
 <!-- DIV của tạo ảnh-->
  </div>
-<!-- DIV của tạo ảnh-->
+<!-- DIV của tạo ảnh -->
+
+<section class="p-3 col-12 col-md-6 mx-auto">
+ <h3 class="fw-bold">Tra cứu theo mã khách hàng</h3>
+
+ <div class="input-group mb-3">
+ <input type="text" class="form-control text-success" id="maKH" placeholder="Nhập mã khách hàng...">
+ <span class="input-group-text btn btn-success" id="tracuu_maKH">TRA CỨU</span>
+ </div>
 
+ <div id="ketqua_maKH"></div>
+
+
+</section>
  </main>
 <hr>
  <footer class="text-center">
@@ -191,6 +240,39 @@
 });
 }
 
+
+// Sử dụng sự kiện change để kiểm tra khi giá trị thay đổi
+// Gán sự kiện click cho nút
+$('#tracuu_maKH').click(function() {
+ // Lấy giá trị của #maKH
+ const maKH = $('#maKH').val();
+
+ // Kiểm tra nếu giá trị maKH rỗng
+ if (!maKH) {
+ $('#ketqua_maKH').text('Không có mã khách hàng. Điện lực miền nam bắt đầu bằng mã "PB"');
+ return; // Dừng việc thực hiện tiếp theo nếu giá trị rỗng
+ }
+
+ // Tạo URL mới dựa trên giá trị mới của #maKH
+ const url = 'https://tracuulichcupdien.hns.workers.dev/?mkh=' + maKH;
+
+ // Gọi AJAX khi người dùng nhấn vào nút
+ $.ajax({
+ url: url,
+ method: 'GET',
+ dataType: 'html',
+ headers: {
+ 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0'
+ },
+ success: function(data) {
+ $('#ketqua_maKH').html(data);
+ },
+ error: function() {
+ $('#ketqua_maKH').text('ERROR');
+ }
+ });
+});
+
  })
  </script>
 
@@ -212,4 +294,4 @@
 </script>
  </body>
 
-</html>
+</html>