You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1235 lines
33 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>GCC - Birth </title>
  7. <!-- Links to Bootstrap CSS and JS, jQuery, and SweetAlert -->
  8. <!-- Bootstrap CSS -->
  9. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  10. <!-- Include Bootstrap Icons CDN in <head> if not already -->
  11. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  12. <!-- <link th:href="@{/styles/birthanddeath.css}" rel="stylesheet" /> -->
  13. </head>
  14. <style>
  15. .form-check {
  16. display: flex;
  17. align-items: center;
  18. margin-bottom: 10px;
  19. }
  20. .form-check-input {
  21. transform: scale(1.5);
  22. }
  23. /*checkbox style*/
  24. label {
  25. color: black;
  26. }
  27. /* Header Styling */
  28. .header {
  29. background-color: #1d495a;
  30. padding: 10px 20px;
  31. display: flex;
  32. align-items: center;
  33. justify-content: space-between;
  34. color: white;
  35. font-family: Arial, sans-serif;
  36. /* position: fixed ;
  37. top: 0;
  38. width: 100%;
  39. z-index: 1000; */
  40. }
  41. .header .logo {
  42. display: flex;
  43. align-items: center;
  44. }
  45. .header .logo img {
  46. height: 60px;
  47. }
  48. .header .center-text {
  49. position: absolute; /* Centered text */
  50. left: 50%;
  51. transform: translateX(-50%);
  52. text-align: center;
  53. font-size: 24px;
  54. }
  55. .header .menu-btn {
  56. background-color: transparent;
  57. border: none;
  58. font-size: 24px;
  59. color: white;
  60. }
  61. .header .menu-btn:hover {
  62. /* text-decoration: underline; */
  63. color: #ccc;
  64. }
  65. /* Menu Dropdown */
  66. .menu-dropdown {
  67. position: relative;
  68. margin-top: 10px;
  69. background-color: #1d495a;
  70. padding: 10px 20px;
  71. display: none;
  72. flex-direction: column;
  73. width: 100%;
  74. }
  75. .menu-dropdown a {
  76. color: white;
  77. margin-bottom: 5px;
  78. text-decoration: none;
  79. }
  80. .menu-dropdown a:hover {
  81. text-decoration: underline;
  82. }
  83. .menu-dropdown {
  84. right: 0;
  85. left: 0;
  86. z-index: 1000; /* Add z-index to bring the menu above other elements */
  87. }
  88. /* Mobile Specific Styling */
  89. @media ( max-width : 768px) {
  90. .header {
  91. display: flex;
  92. justify-content: space-between;
  93. align-items: center;
  94. }
  95. .center-text {
  96. font-size: 18px !important;
  97. flex-grow: 1;
  98. text-align: center;
  99. }
  100. .menu-dropdown {
  101. right: 0;
  102. left: 0;
  103. z-index: 1000;
  104. /* Add z-index to bring the menu above other elements */
  105. }
  106. }
  107. @media (max-width: 768px) {
  108. .user-info {
  109. flex-direction: row;
  110. justify-content: flex-end;
  111. align-items: center;
  112. gap: 10px;
  113. }
  114. .user-name-wrapper {
  115. font-size: 12px;
  116. padding: 3px 10px;
  117. }
  118. #logoutBtn {
  119. font-size: 8px;
  120. padding: 4px 5px;
  121. }
  122. .user-name-text {
  123. font-size: 13px;
  124. }
  125. }
  126. /* Ensure content is not hidden behind the fixed navbar */
  127. body {
  128. margin: 0;
  129. /* margin-top: 90px; Adjust based on your header height */
  130. }
  131. .req {
  132. color: red;
  133. }
  134. /* otp*/
  135. .otp-input-box {
  136. display: flex;
  137. justify-content: center;
  138. gap: 10px;
  139. /* Adjust spacing between the inputs */
  140. }
  141. .otp-input {
  142. width: 50px;
  143. /* Width for a square input */
  144. height: 50px;
  145. /* Height for a square input */
  146. font-size: 24px;
  147. /* Make the digits larger */
  148. text-align: center;
  149. /* Center the digit inside the box */
  150. border: 1px solid #ccc;
  151. /* Optional: add a border */
  152. border-radius: 5px;
  153. /* Optional: rounded corners */
  154. outline: none;
  155. /* Remove default focus outline */
  156. transition: border-color 0.3s ease;
  157. }
  158. .otp-input:focus {
  159. border-color: #007bff;
  160. /* Change border color on focus */
  161. }
  162. /* otp*/
  163. /*send otp styles*/
  164. .input-group .form-control {
  165. border-right: 0;
  166. /* Remove right border of the input to blend with the button */
  167. }
  168. .input-group-append .btn {
  169. border-left: 0;
  170. /* Remove left border of the button */
  171. }
  172. .bottom-container {
  173. margin-bottom: 50px; /* Adjust as needed */
  174. }
  175. /* datatables styles css*/
  176. .dataTables_filter {
  177. float: right;
  178. text-align: right;
  179. }
  180. .dataTables_wrapper .dataTables_paginate .paginate_button {
  181. margin: 0 3px;
  182. padding: 4px 10px;
  183. border: 1px solid #dee2e6;
  184. border-radius: 4px;
  185. background-color: #f8f9fa;
  186. color: #007bff !important;
  187. cursor: pointer;
  188. }
  189. .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  190. background-color: #007bff;
  191. color: white !important;
  192. border: 1px solid #007bff;
  193. }
  194. .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  195. background-color: #e2e6ea;
  196. border-color: #adb5bd;
  197. }
  198. .dataTables_wrapper .dataTables_paginate {
  199. text-align: right !important;
  200. }
  201. /* Navigation Bar */
  202. .nav-link.active {
  203. color: white;
  204. background-color: #007bff;
  205. border-radius: 5px;
  206. padding: 5px 10px;
  207. font-weight: bold;
  208. }
  209. .nav-bar {
  210. background-color: #EBF1FA;
  211. padding: 0.5rem 1rem;
  212. margin-top: 10px;
  213. text-align: center;
  214. border-radius: 1ex;
  215. }
  216. .nav-list {
  217. list-style: none;
  218. margin: 0;
  219. padding: 0;
  220. display: inline-flex;
  221. gap: 2rem;
  222. border-radius: 1ex;
  223. cursor: pointer;
  224. }
  225. .nav-link {
  226. text-decoration: none;
  227. color: #006680;
  228. font-weight: 500;
  229. padding: 0.5rem 1rem;
  230. border-radius: 5px;
  231. transition: background-color 0.3s ease;
  232. }
  233. .nav-link:hover,
  234. .nav-link.active {
  235. background-color: #006680;
  236. color: #fff;
  237. }
  238. /* captcha style css */
  239. .captcha-box {
  240. font-family: 'Courier New', monospace;
  241. font-size: 24px;
  242. letter-spacing: 4px;
  243. font-weight: bold;
  244. background: #f2f2f2;
  245. border: 1px dashed #aaa;
  246. padding: 10px 15px;
  247. user-select: none;
  248. pointer-events: none; /* disables copy */
  249. text-decoration: line-through;
  250. color: #333;
  251. transform: rotate(-1deg);
  252. }
  253. #entered-captcha {
  254. user-select: none;
  255. }
  256. #entered-captcha::placeholder {
  257. font-style: italic;
  258. }
  259. #entered-captcha,
  260. #generated-captcha {
  261. -webkit-user-select: none; /* Chrome/Safari */
  262. -moz-user-select: none; /* Firefox */
  263. -ms-user-select: none; /* IE10+ */
  264. user-select: none;
  265. }
  266. .is-invalid {
  267. border: 1px solid red;
  268. }
  269. /* Decrease top margin for the container */
  270. .container.mt-4, .container.mt-5 {
  271. margin-top: 10px !important; /* Adjust this value as needed */
  272. }
  273. .user-info {
  274. position: absolute;
  275. top: 20px;
  276. right: 71px;
  277. font-weight: bold;
  278. color: #333;
  279. display: flex;
  280. flex-direction: row;
  281. align-items: center;
  282. gap: 26px;
  283. flex-wrap: wrap;
  284. }
  285. .user-name-wrapper {
  286. cursor: pointer;
  287. color: #fff;
  288. font-weight: 500;
  289. padding: 7px 15px;
  290. border-radius: 3px;
  291. background-color: #7b9ab8;
  292. display: inline-flex;
  293. align-items: center;
  294. font-size: 1rem;
  295. }
  296. .user-name-wrapper:hover {
  297. color: #1b1e21;
  298. }
  299. .user-name-active {
  300. /* background-color: #e7f1ff; */
  301. color: #0a58ca;
  302. }
  303. #userNameWrapper {
  304. display: flex;
  305. align-items: center;
  306. gap: 10px;
  307. }
  308. @media (max-width: 768px) {
  309. .mobile-username {
  310. /* display: block; */
  311. font-size: 0.9rem;
  312. }
  313. .header .center-text{
  314. margin-bottom:39px;
  315. }
  316. .mobile-logout {
  317. display: block;
  318. }
  319. /* Hide desktop user-info on mobile */
  320. .user-info {
  321. display: none !important;
  322. }
  323. #logoutBtnMobile {
  324. font-size: 0.9rem;
  325. width: auto;
  326. margin-top: 5px;
  327. }
  328. }
  329. @media (min-width: 769px) {
  330. .mobile-username,
  331. .mobile-logout {
  332. display: block;
  333. }
  334. .header .center-text{
  335. transform: translateX(-80%);
  336. /* left:47%; */
  337. }
  338. }
  339. </style>
  340. <body style="background-color: #ebf1fa;">
  341. <!-- Header Start-->
  342. <header>
  343. <div class="header d-flex justify-content-between align-items-center">
  344. <!-- Left: Logo -->
  345. <div class="logo">
  346. <a href="https://chennaicorporation.gov.in/gcc/">
  347. <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
  348. </a>
  349. </div>
  350. <!-- Center: Text -->
  351. <div class="center-text">GREATER CHENNAI CORPORATION</div>
  352. <!-- Mobile Username (below logo) -->
  353. <!-- Mobile Username (below logo) -->
  354. <div class="mobile-username d-md-none text-start mt-2 ms-2">
  355. <span class="user-name-wrapper" title="Click to logout" style="margin-top: 58px; margin-left: 36px;">
  356. <i class="bi bi-person-circle me-1" style="color:#364d65"></i>
  357. <span id="loggedUserNameMobile" class="user-name-text"></span>
  358. </span>
  359. </div>
  360. <!-- Desktop User Info (hidden on mobile) -->
  361. <div class="user-info d-md-flex align-items-center">
  362. <span class="user-name-wrapper" title="Click to logout">
  363. <i class="bi bi-person-circle me-1" style="color:#364d65"></i>
  364. <span id="loggedUserNameDesktop" class="user-name-text"></span>
  365. </span>
  366. <div id="userNameWrapper" class="ms-2 p-1 rounded">
  367. <button id="logoutBtn" class="btn btn-sm btn-danger" style="font-weight:6px;">LOG OUT</button>
  368. </div>
  369. </div>
  370. <!-- Home Icon + Logout button (mobile logout under icon) -->
  371. <div class="center">
  372. <a href="https://chennaicorporation.gov.in/gcc/">
  373. <i class="bi bi-house-fill" style="font-size: 40px; color:#93adc8; margin-left: 21px;"></i>
  374. </a>
  375. <!-- Mobile Logout -->
  376. <div class="mobile-logout d-md-none text-center mt-1">
  377. <button id="logoutBtnMobile" class="btn btn-sm btn-danger" style="font-weight:6px;">LOG OUT</button>
  378. </div>
  379. </div>
  380. </div>
  381. <div class="navhead">
  382. <!-- Navigation Bar -->
  383. <nav class="nav-bar">
  384. <ul class="nav-list">
  385. <li><a id="birth-link" class="nav-link active">Birth</a></li>
  386. <!-- <li><a id="death-link" class="nav-link">Death</a></li> -->
  387. </ul>
  388. </nav>
  389. </div>
  390. </header>
  391. <!-- Header End-->
  392. <main class="container mt-4" >
  393. <div class="container mt-5">
  394. <div class="card" id="birth-card" style="display: block;">
  395. <div class="card-header bg-dark text-white">
  396. <h5>Birth Certificate:-</h5>
  397. </div>
  398. <div class="card-body">
  399. <h6>
  400. <strong>Birth Certificate Details :-</strong>
  401. </h6>
  402. <hr />
  403. <div class="container mt-5">
  404. <!-- Row 1:Register No and Name -->
  405. <div class="row mb-3">
  406. <div class="col-md-5">
  407. <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text"
  408. id="regno" class="form-control"
  409. placeholder="Enter Register number">
  410. </div>
  411. <div class="col-md-5">
  412. <label class="form-label" for="name">Child Name </label> <input type="text"
  413. class="form-control" placeholder="Enter Child Name here" id="childname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
  414. </div>
  415. </div>
  416. <!-- Row 2: D.O.B and Gender -->
  417. <div class="row mb-3">
  418. <div class="col-md-5">
  419. <label class="form-label" for="name">Date of Birth<span
  420. class="text-danger">*</span></label> <input type="DATE"
  421. class="form-control" placeholder="Enter Door Number"
  422. id="dateofbirth" onclick="this.showPicker()" required>
  423. </div>
  424. <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label>
  425. <div class="d-flex align-items-center gap-3">
  426. <div class="form-check form-check-inline mb-0">
  427. <input class="form-check-input" type="radio" name="gender" id="birthGenderMale" value="Male" required> <label class="form-check-label" for="birthGenderMale">Male</label> </div>
  428. <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="gender" id="birthGenderFemale" value="Female" required> <label class="form-check-label" for="birthGenderFemale">Female</label> </div>
  429. <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="gender" id="birthGenderTrans" value="Transgender" required> <label class="form-check-label" for="birthGenderTrans">Transgender</label> </div> </div> </div>
  430. </div>
  431. <!-- Row 3: Parents Details -->
  432. <div class="row mb-3">
  433. <div class="col-md-5">
  434. <label class="form-label" for="name">Name of Father</label> <input type="text"
  435. class="form-control" placeholder="Enter the Father Name"
  436. id="fathername">
  437. </div>
  438. <div class="col-md-5">
  439. <label class="form-label" for="name">Name of Mother</span></label> <input type="text"
  440. class="form-control" placeholder="Enter the Mother Name"
  441. id="mothername">
  442. </div>
  443. <div class="col-md-5 mt-3">
  444. <label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
  445. <div class="d-flex align-items-center">
  446. <div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
  447. <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('birth')">↻</button>
  448. </div>
  449. <input type="text" id="birth-captcha-input" class="form-control mt-2"
  450. placeholder="Enter Captcha"
  451. onpaste="return false" oncopy="return false" oncut="return false" />
  452. </div>
  453. </div>
  454. </div>
  455. <div class="text-center ">
  456. <button type="button" class="btn btn-success" onclick="fetchBirthData()">Submit</button>
  457. <!-- <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button> -->
  458. </div>
  459. </div>
  460. </div>
  461. <!-- Death certificate card -->
  462. <div class="card" id="death-card" style="display: none;">
  463. <div class="card-header bg-dark text-white">
  464. <h5>Death Certificate:-</h5>
  465. </div>
  466. <div class="card-body" >
  467. <h6>
  468. <strong>Death Certificate Details :-</strong>
  469. </h6>
  470. <hr />
  471. <div class="container mt-5">
  472. <!-- Row 1:Register No and Name -->
  473. <div class="row mb-3">
  474. <div class="col-md-5">
  475. <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text"
  476. class="form-control"
  477. placeholder="Enter Register number">
  478. </div>
  479. <div class="col-md-5">
  480. <label class="form-label" for="name">Person Name </label> <input type="text"
  481. class="form-control" placeholder="Enter Person Name here" id="personname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
  482. </div>
  483. </div>
  484. <!-- Row 2: D.O.B and Gender -->
  485. <div class="row mb-3">
  486. <div class="col-md-5">
  487. <label class="form-label" for="name">Date of Death<span
  488. class="text-danger">*</span></label> <input type="DATE"
  489. class="form-control" placeholder="Select Date"
  490. id="dateofdeath" onclick="this.showPicker()" required>
  491. </div>
  492. <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label>
  493. <div class="d-flex align-items-center gap-3">
  494. <div class="form-check form-check-inline mb-0">
  495. <input class="form-check-input" type="radio" name="deathgender" id="deathGenderMale" value="Male" required> <label class="form-check-label" for="deathGenderMale">Male</label> </div>
  496. <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="deathgender" id="deathGenderFemale" value="Female" required> <label class="form-check-label" for="deathGenderFemale">Female</label> </div>
  497. <div class="form-check form-check-inline mb-0"> <input class="form-check-input" type="radio" name="deathgender" id="deathGenderTrans" value="Transgender" required> <label class="form-check-label" for="deathGenderTrans">Transgender</label>
  498. </div> </div> </div>
  499. </div>
  500. <!-- Row 3: Parents Details -->
  501. <div class="row mb-3">
  502. <div class="col-md-5">
  503. <label class="form-label" for="name">Name of Father</label> <input type="text"
  504. class="form-control" placeholder="Enter the Father Name"
  505. id="deathfathername">
  506. </div>
  507. <div class="col-md-5">
  508. <label class="form-label" for="name">Name of Mother</label> <input type="text"
  509. class="form-control" placeholder="Enter the Mother Name"
  510. id="deathmothername">
  511. </div>
  512. <div class="col-md-5 mt-3">
  513. <label for="death-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
  514. <div class="d-flex align-items-center">
  515. <div id="death-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
  516. <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('death')">↻</button>
  517. </div>
  518. <input type="text" id="death-captcha-input" class="form-control mt-2"
  519. placeholder="Enter Captcha"
  520. onpaste="return false" oncopy="return false" oncut="return false" />
  521. </div>
  522. </div>
  523. </div>
  524. <div class="text-center ">
  525. <button type="button" class="btn btn-success" onclick="fetchDeathData()">Submit</button>
  526. <!-- <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button> -->
  527. </div>
  528. </div>
  529. </div>
  530. <br>
  531. </div>
  532. </main>
  533. <div id="pageLoader"
  534. style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
  535. <div
  536. style="position: relative; top: 50%; transform: translateY(-50%);">
  537. <div class="spinner-border text-primary" role="status"
  538. style="width: 3rem; height: 3rem;">
  539. <span class="sr-only">Loading...</span>
  540. </div>
  541. <!-- Add the 'Please wait' text below the spinner -->
  542. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please
  543. wait...</p>
  544. </div>
  545. </div>
  546. <!-- Bootstrap Modal -->
  547. <div class="modal fade" id="birthModal" tabindex="-1" aria-labelledby="birthModalLabel" data-bs-backdrop="static" aria-hidden="true">
  548. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  549. <div class="modal-content">
  550. <div class="modal-header">
  551. <h5 class="modal-title" id="birthModalLabel">Birth Certificate Details</h5>
  552. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
  553. </div>
  554. <div class="modal-body" id="birthModalBody">
  555. <!-- Table will be injected here -->
  556. </div>
  557. </div>
  558. </div>
  559. </div>
  560. <!-- Bootstrap Modal -->
  561. <div class="modal fade" id="deathModal" tabindex="-1" aria-labelledby="deathModalLabel" data-bs-backdrop="static" aria-hidden="true">
  562. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  563. <div class="modal-content">
  564. <div class="modal-header">
  565. <h5 class="modal-title" id="deathModalLabel">Death Certificate Details</h5>
  566. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
  567. </div>
  568. <div class="modal-body" id="deathModalBody">
  569. <!-- Table will be injected here -->
  570. </div>
  571. </div>
  572. </div>
  573. </div>
  574. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  575. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  576. <script
  577. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  578. <script
  579. src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  580. <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  581. <!-- Your custom script
  582. <script th:src="@{/script/birthanddeath.js}"></script> -->
  583. <script>
  584. // Redirect after 60 seconds (1 minute) of inactivity
  585. let timeoutDuration = 10 * 60 * 1000; // 60 seconds
  586. //let timeoutDuration = 1 * 60 * 1000; // 1 minute = 60,000 ms
  587. let timeout;
  588. function resetTimeout() {
  589. clearTimeout(timeout);
  590. timeout = setTimeout(() => {
  591. // Optionally check if session is still active via an API
  592. window.location.href = "/crs/birthloginpage";
  593. }, timeoutDuration);
  594. }
  595. // Reset timeout on user interaction
  596. ['click', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(evt => {
  597. document.addEventListener(evt, resetTimeout, false);
  598. });
  599. // Start timer initially
  600. resetTimeout();
  601. $(document).ready(function () {
  602. $('#birthModal, #deathModal').on('hidden.bs.modal', function () {
  603. window.location.reload();
  604. });
  605. });
  606. $(document).ready(function () {
  607. function resetFields(cardId) {
  608. // Clear all input fields inside the given card
  609. $(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val('');
  610. $(`#${cardId} input[type="radio"]`).prop('checked', false);
  611. }
  612. $('#birth-link').on('click', function () {
  613. resetFields('birth-card');
  614. });
  615. $('#death-link').on('click', function () {
  616. resetFields('death-card');
  617. });
  618. });
  619. document.addEventListener("DOMContentLoaded", function () {
  620. const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
  621. document.getElementById("dateofbirth").setAttribute("max", today);
  622. document.getElementById("dateofdeath").setAttribute("max", today);
  623. });
  624. document.addEventListener("DOMContentLoaded", function () {
  625. const userName = localStorage.getItem("userName");
  626. //console.log("userName ",userName);
  627. if (userName) {
  628. // Mobile
  629. const mobileName = document.getElementById("loggedUserNameMobile");
  630. const mobileWrapper = document.querySelector(".mobile-username .user-name-wrapper");
  631. if (mobileName) mobileName.textContent = userName;
  632. if (mobileWrapper) mobileWrapper.title = "Logged in as " + userName;
  633. // Desktop
  634. const desktopName = document.getElementById("loggedUserNameDesktop");
  635. const desktopNameCopy = document.getElementById("loggedUserNameCopy");
  636. const desktopWrapper = document.querySelector(".user-info .user-name-wrapper");
  637. if (desktopName) desktopName.textContent = userName;
  638. if (desktopNameCopy) desktopNameCopy.textContent = userName;
  639. if (desktopWrapper) desktopWrapper.title = "Logged in as " + userName;
  640. }
  641. $('#logoutBtn,#logoutBtnMobile').click(function () {
  642. Swal.fire({
  643. title: "Are you sure?",
  644. text: "Do you really want to logout?",
  645. icon: "warning",
  646. showCancelButton: true,
  647. confirmButtonColor: "#d33",
  648. cancelButtonColor: "#3085d6",
  649. confirmButtonText: "Yes, logout",
  650. cancelButtonText: "Cancel"
  651. }).then((result) => {
  652. if (result.isConfirmed) {
  653. $.ajax({
  654. url: "/crs/birthlogout",
  655. method: "GET",
  656. success: function () {
  657. localStorage.clear(); // Clear frontend storage
  658. window.location.href = "/crs/birth"; // Redirect to login page
  659. },
  660. error: function () {
  661. Swal.fire("Error", "Logout failed. Try again.", "error");
  662. }
  663. });
  664. }
  665. });
  666. });
  667. });
  668. const links = document.querySelectorAll('.nav-link');
  669. links.forEach(link => {
  670. if (window.location.href.includes(link.getAttribute('href'))) {
  671. link.classList.add('active');
  672. }
  673. });
  674. /* card display script */
  675. document.addEventListener("DOMContentLoaded", function () {
  676. const birthLink = document.getElementById("birth-link");
  677. const deathLink = document.getElementById("death-link");
  678. const birthCard = document.getElementById("birth-card");
  679. const deathCard = document.getElementById("death-card");
  680. function showCard(selectedLink, selectedCard, otherLink, otherCard) {
  681. selectedCard.style.display = "block";
  682. otherCard.style.display = "none";
  683. selectedLink.classList.add("active");
  684. otherLink.classList.remove("active");
  685. }
  686. birthLink.addEventListener("click", function () {
  687. showCard(birthLink, birthCard, deathLink, deathCard);
  688. });
  689. deathLink.addEventListener("click", function () {
  690. showCard(deathLink, deathCard, birthLink, birthCard);
  691. });
  692. });
  693. //////////////////////////////////////////////
  694. function generateCaptcha(type) {
  695. const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  696. let captcha = "";
  697. for (let i = 0; i < 6; i++) {
  698. captcha += chars.charAt(Math.floor(Math.random() * chars.length));
  699. }
  700. const targetId = `${type}-captcha`; // FIXED: match HTML ID
  701. const element = document.getElementById(targetId);
  702. if (element) {
  703. element.textContent = captcha;
  704. // Styling for obscurity
  705. element.style.fontSize = "18px";
  706. element.style.letterSpacing = "3px";
  707. element.style.fontWeight = "bold";
  708. element.style.backgroundColor = "#f0f0f0";
  709. element.style.border = "1px solid #ccc";
  710. element.style.padding = "5px";
  711. element.style.userSelect = "none";
  712. }
  713. }
  714. function validateCaptcha(type) {
  715. const generated = document.getElementById(`${type}-captcha`).textContent.trim();
  716. const entered = document.getElementById(`${type}-captcha-input`).value.trim();
  717. if (!entered) {
  718. Swal.fire({
  719. icon: 'warning',
  720. title: 'CAPTCHA Required',
  721. text: 'Please enter the CAPTCHA before submitting.'
  722. });
  723. //inputField.focus();
  724. return false;
  725. }
  726. if (generated !== entered) {
  727. Swal.fire({
  728. icon: 'error',
  729. title: 'Invalid CAPTCHA',
  730. text: 'The entered CAPTCHA is incorrect. Please try again.'
  731. });
  732. generateCaptcha(type);
  733. return false;
  734. }
  735. return true;
  736. }
  737. document.addEventListener("DOMContentLoaded", function () {
  738. generateCaptcha("birth");
  739. generateCaptcha("death");
  740. });
  741. function fetchBirthData() {
  742. const dob = document.getElementById('dateofbirth').value;
  743. const gender = document.querySelector('input[name="gender"]:checked')?.value;
  744. const captchaInput = document.getElementById('birth-captcha-input');
  745. //console.log("gender:", gender);
  746. // Validate Date of Birth
  747. if (!dob) {
  748. Swal.fire({
  749. icon: 'warning',
  750. title: 'Missing Date of Birth',
  751. text: 'Please enter your Date of Birth.'
  752. });
  753. return;
  754. }
  755. // Validate Gender
  756. if (!gender) {
  757. Swal.fire({
  758. icon: 'warning',
  759. title: 'Missing Gender Selection',
  760. text: 'Please select a gender.'
  761. });
  762. return;
  763. }
  764. // CAPTCHA validation first
  765. // Validate CAPTCHA
  766. if (!validateCaptcha('birth')) {
  767. //captchaInput.classList.add('is-invalid');
  768. //captchaInput.focus();
  769. return;
  770. } else {
  771. captchaInput.classList.remove('is-invalid');
  772. }
  773. const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
  774. //console.log("dob:", formattedDob);
  775. $('#pageLoader').show();
  776. $.ajax({
  777. url: '/crs/api/birth-details',
  778. method: 'GET',
  779. data: {
  780. dob: formattedDob,
  781. sex: gender.charAt(0).toUpperCase()
  782. },
  783. success: function (response) {
  784. $('#pageLoader').hide();
  785. if (response && response.BIRTH && response.BIRTH.length > 0) {
  786. console.log("birthdetails:",response);
  787. let html = `
  788. <table id="birthDataTable" class="table table-bordered table-striped">
  789. <thead>
  790. <tr>
  791. <th>S.No</th>
  792. <th>Reg No</th>
  793. <th>Child Name</th>
  794. <th>Father</th>
  795. <th>Mother</th>
  796. <th>DOB</th>
  797. <th>Certificate Link</th>
  798. </tr>
  799. </thead>
  800. <tbody>`;
  801. response.BIRTH.forEach((row, index) => {
  802. html += `<tr>
  803. <td>${index + 1}</td>
  804. <td>${row.REGNO}</td>
  805. <td>${row.CHILDNAME}</td>
  806. <td>${row.FATHERNAME}</td>
  807. <td>${row.MOTHERNAME}</td>
  808. <td>${row.DOB}</td>
  809. <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
  810. onclick="saveCertificateLog('${row.REGNO}', '${row.DOB}', '${row.ENGLISHURL}', 'Birth')">View</a>` : 'N/A'}</td>
  811. </tr>`;
  812. });
  813. html += `</tbody></table>`;
  814. $('#birthModalBody').html(html);
  815. setTimeout(() => {
  816. $('#birthDataTable').DataTable({
  817. responsive: true,
  818. pagingType: "full_numbers", // Buttons for pagination
  819. language: {
  820. search: "🔍 Search: ",
  821. emptyTable: "No records found",
  822. paginate: {
  823. previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
  824. next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
  825. }
  826. },
  827. columnDefs: [
  828. { orderable: false, targets: 0 } // Disable sorting on S.No
  829. ]
  830. });
  831. }, 100);
  832. }
  833. else {
  834. $('#birthModalBody').html('<p class="text-danger">No birth records found.</p>');
  835. }
  836. const modal = new bootstrap.Modal(document.getElementById('birthModal'));
  837. modal.show();
  838. },
  839. error: function (xhr) {
  840. $('#pageLoader').hide();
  841. let message = "Something went wrong.";
  842. if (xhr.responseJSON && xhr.responseJSON.message) {
  843. message = xhr.responseJSON.message;
  844. }
  845. alert("Error: " + message);
  846. }
  847. });
  848. }
  849. function fetchDeathData() {
  850. const dod = document.getElementById('dateofdeath').value;
  851. const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
  852. const captchaInput = document.getElementById('death-captcha-input');
  853. // console.log("gender:", gender);
  854. // Validate Date of Birth
  855. if (!dod) {
  856. Swal.fire({
  857. icon: 'warning',
  858. title: 'Missing Date of Birth',
  859. text: 'Please enter your Date of Birth.'
  860. });
  861. return;
  862. }
  863. // Validate Gender
  864. if (!gender) {
  865. Swal.fire({
  866. icon: 'warning',
  867. title: 'Missing Gender Selection',
  868. text: 'Please select a gender.'
  869. });
  870. return;
  871. }
  872. if (!validateCaptcha('death')) {
  873. //captchaInput.classList.add('is-invalid');
  874. //captchaInput.focus();
  875. return;
  876. } else {
  877. captchaInput.classList.remove('is-invalid');
  878. }
  879. const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
  880. // console.log("dod:", formattedDod);
  881. $('#pageLoader').show();
  882. $.ajax({
  883. url: '/crs/api/death-details',
  884. method: 'GET',
  885. data: {
  886. dod: formattedDod,
  887. sex: gender.charAt(0).toUpperCase()
  888. },
  889. success: function (response) {
  890. $('#pageLoader').hide();
  891. if (response && response.DEATH && response.DEATH.length > 0) {
  892. let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' +
  893. '<th>S.No</th><th>Reg No</th><th>Person Name</th>' +
  894. '<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
  895. response.DEATH.forEach((row ,index) => {
  896. html += `<tr>
  897. <td>${index + 1}</td>
  898. <td>${row.REGNO}</td>
  899. <td>${row.DEATHPERSONNAME}</td>
  900. <td>${row.FATHERNAME}</td>
  901. <td>${row.MOTHERNAME}</td>
  902. <td>${row.DOD}</td>
  903. <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
  904. onclick="saveCertificateLog('${row.REGNO}', '${row.DOD}', '${row.ENGLISHURL}', 'Death')">View</a>` : 'N/A'}</td> </tr>`;
  905. });
  906. html += '</tbody></table>';
  907. $('#deathModalBody').html(html);
  908. // Delay initialization to ensure DOM is ready
  909. setTimeout(() => {
  910. $('#deathDataTable').DataTable({
  911. responsive: true,
  912. pagingType: "full_numbers", // Buttons for pagination
  913. language: {
  914. search: "🔍 Search: ",
  915. emptyTable: "No records found",
  916. paginate: {
  917. previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
  918. next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
  919. }
  920. },
  921. columnDefs: [
  922. { orderable: false, targets: 0 } // Disable sorting on S.No
  923. ]
  924. });
  925. }, 100);
  926. } else {
  927. $('#deathModalBody').html('<p class="text-danger">No deathrecords found.</p>');
  928. }
  929. const modal = new bootstrap.Modal(document.getElementById('deathModal'));
  930. modal.show();
  931. },
  932. error: function (xhr) {
  933. $('#pageLoader').hide();
  934. let message = "Something went wrong.";
  935. if (xhr.responseJSON && xhr.responseJSON.message) {
  936. message = xhr.responseJSON.message;
  937. }
  938. alert("Error: " + message);
  939. }
  940. });
  941. }
  942. function saveCertificateLog(regNo, eventDate, url, service){
  943. $.ajax({
  944. url: '/crs/api/saveCertificateLogs',
  945. type: 'POST',
  946. data: {
  947. regNo: regNo,
  948. eventDate: eventDate,
  949. Url: url,
  950. service: service
  951. },
  952. success: function() {
  953. //console.log('View logged successfully');
  954. },
  955. error: function(xhr, status, error) {
  956. console.error('Logging failed:', error);
  957. }
  958. });
  959. }
  960. </script>
  961. </body>
  962. </html>