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.

1234 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 - Death</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. <div class="row mb-3">
  405. <div class="col-md-5">
  406. <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text"
  407. id="regno" class="form-control"
  408. placeholder="Enter Register number">
  409. </div>
  410. <div class="col-md-5">
  411. <label class="form-label" for="name">Child Name </label> <input type="text"
  412. class="form-control" placeholder="Enter Child Name here" id="childname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
  413. </div>
  414. </div>
  415. <div class="row mb-3">
  416. <div class="col-md-5">
  417. <label class="form-label" for="name">Date of Birth<span
  418. class="text-danger">*</span></label> <input type="DATE"
  419. class="form-control" placeholder="Enter Door Number"
  420. id="dateofbirth" onclick="this.showPicker()" required>
  421. </div>
  422. <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label>
  423. <div class="d-flex align-items-center gap-3">
  424. <div class="form-check form-check-inline mb-0">
  425. <input class="form-check-input" type="radio" name="gender" id="birthGenderMale" value="Male" required> <label class="form-check-label" for="birthGenderMale">Male</label> </div>
  426. <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>
  427. <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>
  428. </div>
  429. <div class="row mb-3">
  430. <div class="col-md-5">
  431. <label class="form-label" for="name">Name of Father</label> <input type="text"
  432. class="form-control" placeholder="Enter the Father Name"
  433. id="fathername">
  434. </div>
  435. <div class="col-md-5">
  436. <label class="form-label" for="name">Name of Mother</span></label> <input type="text"
  437. class="form-control" placeholder="Enter the Mother Name"
  438. id="mothername">
  439. </div>
  440. <div class="col-md-5 mt-3">
  441. <label for="birth-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
  442. <div class="d-flex align-items-center">
  443. <div id="birth-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
  444. <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('birth')">↻</button>
  445. </div>
  446. <input type="text" id="birth-captcha-input" class="form-control mt-2"
  447. placeholder="Enter Captcha"
  448. onpaste="return false" oncopy="return false" oncut="return false" />
  449. </div>
  450. </div>
  451. </div>
  452. <div class="text-center ">
  453. <button type="button" class="btn btn-success" onclick="fetchBirthData()">Submit</button>
  454. </div> -->
  455. </div>
  456. </div>
  457. <!-- Death certificate card -->
  458. <div class="card" id="death-card">
  459. <div class="card-header bg-dark text-white">
  460. <h5>Death Certificate:-</h5>
  461. </div>
  462. <div class="card-body" >
  463. <h6>
  464. <strong>Death Certificate Details :-</strong>
  465. </h6>
  466. <hr />
  467. <div class="container mt-5">
  468. <!-- Row 1:Register No and Name -->
  469. <div class="row mb-3">
  470. <div class="col-md-5">
  471. <label class="form-label" for="phoneNumber">Enter Register Number </label> <input type="text"
  472. class="form-control"
  473. placeholder="Enter Register number">
  474. </div>
  475. <div class="col-md-5">
  476. <label class="form-label" for="name">Person Name </label> <input type="text"
  477. class="form-control" placeholder="Enter Person Name here" id="personname" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
  478. </div>
  479. </div>
  480. <!-- Row 2: D.O.B and Gender -->
  481. <div class="row mb-3">
  482. <div class="col-md-5">
  483. <label class="form-label" for="name">Date of Death<span
  484. class="text-danger">*</span></label> <input type="DATE"
  485. class="form-control" placeholder="Select Date"
  486. id="dateofdeath" onclick="this.showPicker()" required>
  487. </div>
  488. <div class="col-md-5"> <label class="form-label d-block">Gender <span class="text-danger">*</span></label>
  489. <div class="d-flex align-items-center gap-3">
  490. <div class="form-check form-check-inline mb-0">
  491. <input class="form-check-input" type="radio" name="deathgender" id="deathGenderMale" value="Male" required> <label class="form-check-label" for="deathGenderMale">Male</label> </div>
  492. <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>
  493. <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>
  494. </div> </div> </div>
  495. </div>
  496. <!-- Row 3: Parents Details -->
  497. <div class="row mb-3">
  498. <div class="col-md-5">
  499. <label class="form-label" for="name">Name of Father</label> <input type="text"
  500. class="form-control" placeholder="Enter the Father Name"
  501. id="deathfathername">
  502. </div>
  503. <div class="col-md-5">
  504. <label class="form-label" for="name">Name of Mother</label> <input type="text"
  505. class="form-control" placeholder="Enter the Mother Name"
  506. id="deathmothername">
  507. </div>
  508. <div class="col-md-5 mt-3">
  509. <label for="death-captcha-input">Enter Captcha <span class="text-danger">*</span></label>
  510. <div class="d-flex align-items-center">
  511. <div id="death-captcha" class="captcha-box mr-2" style="width: 140px; text-align: center; user-select: none;"></div>
  512. <button type="button" class="btn btn-sm btn-outline-secondary" onclick="generateCaptcha('death')">↻</button>
  513. </div>
  514. <input type="text" id="death-captcha-input" class="form-control mt-2"
  515. placeholder="Enter Captcha"
  516. onpaste="return false" oncopy="return false" oncut="return false" />
  517. </div>
  518. </div>
  519. </div>
  520. <div class="text-center ">
  521. <button type="button" class="btn btn-success" onclick="fetchDeathData()">Submit</button>
  522. <!-- <button type="button" class="btn btn-secondary" onclick="goBack()">Back</button> -->
  523. </div>
  524. </div>
  525. </div>
  526. <br>
  527. </div>
  528. </main>
  529. <div id="pageLoader"
  530. 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;">
  531. <div
  532. style="position: relative; top: 50%; transform: translateY(-50%);">
  533. <div class="spinner-border text-primary" role="status"
  534. style="width: 3rem; height: 3rem;">
  535. <span class="sr-only">Loading...</span>
  536. </div>
  537. <!-- Add the 'Please wait' text below the spinner -->
  538. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please
  539. wait...</p>
  540. </div>
  541. </div>
  542. <!-- Bootstrap Modal -->
  543. <div class="modal fade" id="birthModal" tabindex="-1" aria-labelledby="birthModalLabel" data-bs-backdrop="static" aria-hidden="true">
  544. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  545. <div class="modal-content">
  546. <div class="modal-header">
  547. <h5 class="modal-title" id="birthModalLabel">Birth Certificate Details</h5>
  548. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
  549. </div>
  550. <div class="modal-body" id="birthModalBody">
  551. <!-- Table will be injected here -->
  552. </div>
  553. </div>
  554. </div>
  555. </div>
  556. <!-- Bootstrap Modal -->
  557. <div class="modal fade" id="deathModal" tabindex="-1" aria-labelledby="deathModalLabel" data-bs-backdrop="static" aria-hidden="true">
  558. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  559. <div class="modal-content">
  560. <div class="modal-header">
  561. <h5 class="modal-title" id="deathModalLabel">Death Certificate Details</h5>
  562. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
  563. </div>
  564. <div class="modal-body" id="deathModalBody">
  565. <!-- Table will be injected here -->
  566. </div>
  567. </div>
  568. </div>
  569. </div>
  570. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  571. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  572. <script
  573. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  574. <script
  575. src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  576. <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  577. <!-- Your custom script
  578. <script th:src="@{/script/birthanddeath.js}"></script> -->
  579. <script>
  580. // Redirect after 60 seconds (1 minute) of inactivity
  581. let timeoutDuration = 10 * 60 * 1000; // 60 seconds
  582. let timeout;
  583. function resetTimeout() {
  584. clearTimeout(timeout);
  585. timeout = setTimeout(() => {
  586. // Optionally check if session is still active via an API
  587. window.location.href = "/crs/loginpage";
  588. }, timeoutDuration);
  589. }
  590. // Reset timeout on user interaction
  591. ['click', 'mousemove', 'keypress', 'scroll', 'touchstart'].forEach(evt => {
  592. document.addEventListener(evt, resetTimeout, false);
  593. });
  594. // Start timer initially
  595. resetTimeout();
  596. $(document).ready(function () {
  597. $('#birthModal, #deathModal').on('hidden.bs.modal', function () {
  598. window.location.reload();
  599. });
  600. });
  601. $(document).ready(function () {
  602. function resetFields(cardId) {
  603. // Clear all input fields inside the given card
  604. $(`#${cardId} input[type="text"], #${cardId} input[type="date"]`).val('');
  605. $(`#${cardId} input[type="radio"]`).prop('checked', false);
  606. }
  607. $('#birth-link').on('click', function () {
  608. resetFields('birth-card');
  609. });
  610. $('#death-link').on('click', function () {
  611. resetFields('death-card');
  612. });
  613. });
  614. document.addEventListener("DOMContentLoaded", function () {
  615. const today = new Date().toISOString().split("T")[0]; // yyyy-mm-dd format
  616. document.getElementById("dateofbirth").setAttribute("max", today);
  617. document.getElementById("dateofdeath").setAttribute("max", today);
  618. });
  619. document.addEventListener("DOMContentLoaded", function () {
  620. const userName = localStorage.getItem("userName");
  621. //console.log("userName ",userName);
  622. if (userName) {
  623. // Mobile
  624. const mobileName = document.getElementById("loggedUserNameMobile");
  625. const mobileWrapper = document.querySelector(".mobile-username .user-name-wrapper");
  626. if (mobileName) mobileName.textContent = userName;
  627. if (mobileWrapper) mobileWrapper.title = "Logged in as " + userName;
  628. // Desktop
  629. const desktopName = document.getElementById("loggedUserNameDesktop");
  630. const desktopNameCopy = document.getElementById("loggedUserNameCopy");
  631. const desktopWrapper = document.querySelector(".user-info .user-name-wrapper");
  632. if (desktopName) desktopName.textContent = userName;
  633. if (desktopNameCopy) desktopNameCopy.textContent = userName;
  634. if (desktopWrapper) desktopWrapper.title = "Logged in as " + userName;
  635. }
  636. $('#logoutBtn,#logoutBtnMobile').click(function () {
  637. Swal.fire({
  638. title: "Are you sure?",
  639. text: "Do you really want to logout?",
  640. icon: "warning",
  641. showCancelButton: true,
  642. confirmButtonColor: "#d33",
  643. cancelButtonColor: "#3085d6",
  644. confirmButtonText: "Yes, logout",
  645. cancelButtonText: "Cancel"
  646. }).then((result) => {
  647. if (result.isConfirmed) {
  648. $.ajax({
  649. url: "/crs/deathlogout",
  650. method: "GET",
  651. success: function () {
  652. localStorage.clear(); // Clear frontend storage
  653. window.location.href = "/crs/death"; // Redirect to login page
  654. },
  655. error: function () {
  656. Swal.fire("Error", "Logout failed. Try again.", "error");
  657. }
  658. });
  659. }
  660. });
  661. });
  662. });
  663. const links = document.querySelectorAll('.nav-link');
  664. links.forEach(link => {
  665. if (window.location.href.includes(link.getAttribute('href'))) {
  666. link.classList.add('active');
  667. }
  668. });
  669. /* card display script */
  670. document.addEventListener("DOMContentLoaded", function () {
  671. const birthLink = document.getElementById("birth-link");
  672. const deathLink = document.getElementById("death-link");
  673. const birthCard = document.getElementById("birth-card");
  674. const deathCard = document.getElementById("death-card");
  675. function showCard(selectedLink, selectedCard, otherLink, otherCard) {
  676. selectedCard.style.display = "block";
  677. otherCard.style.display = "none";
  678. selectedLink.classList.add("active");
  679. otherLink.classList.remove("active");
  680. }
  681. birthLink.addEventListener("click", function () {
  682. showCard(birthLink, birthCard, deathLink, deathCard);
  683. });
  684. deathLink.addEventListener("click", function () {
  685. showCard(deathLink, deathCard, birthLink, birthCard);
  686. });
  687. });
  688. //////////////////////////////////////////////
  689. function generateCaptcha(type) {
  690. const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  691. let captcha = "";
  692. for (let i = 0; i < 6; i++) {
  693. captcha += chars.charAt(Math.floor(Math.random() * chars.length));
  694. }
  695. const targetId = `${type}-captcha`; // FIXED: match HTML ID
  696. const element = document.getElementById(targetId);
  697. if (element) {
  698. element.textContent = captcha;
  699. // Styling for obscurity
  700. element.style.fontSize = "18px";
  701. element.style.letterSpacing = "3px";
  702. element.style.fontWeight = "bold";
  703. element.style.backgroundColor = "#f0f0f0";
  704. element.style.border = "1px solid #ccc";
  705. element.style.padding = "5px";
  706. element.style.userSelect = "none";
  707. }
  708. }
  709. function validateCaptcha(type) {
  710. const generated = document.getElementById(`${type}-captcha`).textContent.trim();
  711. const entered = document.getElementById(`${type}-captcha-input`).value.trim();
  712. if (!entered) {
  713. Swal.fire({
  714. icon: 'warning',
  715. title: 'CAPTCHA Required',
  716. text: 'Please enter the CAPTCHA before submitting.'
  717. });
  718. //inputField.focus();
  719. return false;
  720. }
  721. if (generated !== entered) {
  722. Swal.fire({
  723. icon: 'error',
  724. title: 'Invalid CAPTCHA',
  725. text: 'The entered CAPTCHA is incorrect. Please try again.'
  726. });
  727. generateCaptcha(type);
  728. return false;
  729. }
  730. return true;
  731. }
  732. document.addEventListener("DOMContentLoaded", function () {
  733. generateCaptcha("birth");
  734. generateCaptcha("death");
  735. });
  736. function fetchBirthData() {
  737. const dob = document.getElementById('dateofbirth').value;
  738. const gender = document.querySelector('input[name="gender"]:checked')?.value;
  739. const captchaInput = document.getElementById('birth-captcha-input');
  740. //console.log("gender:", gender);
  741. // Validate Date of Birth
  742. if (!dob) {
  743. Swal.fire({
  744. icon: 'warning',
  745. title: 'Missing Date of Birth',
  746. text: 'Please enter your Date of Birth.'
  747. });
  748. return;
  749. }
  750. // Validate Gender
  751. if (!gender) {
  752. Swal.fire({
  753. icon: 'warning',
  754. title: 'Missing Gender Selection',
  755. text: 'Please select a gender.'
  756. });
  757. return;
  758. }
  759. // CAPTCHA validation first
  760. // Validate CAPTCHA
  761. if (!validateCaptcha('birth')) {
  762. //captchaInput.classList.add('is-invalid');
  763. //captchaInput.focus();
  764. return;
  765. } else {
  766. captchaInput.classList.remove('is-invalid');
  767. }
  768. const formattedDob = dob.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
  769. //console.log("dob:", formattedDob);
  770. $('#pageLoader').show();
  771. $.ajax({
  772. url: '/crs/api/birth-details',
  773. method: 'GET',
  774. data: {
  775. dob: formattedDob,
  776. sex: gender.charAt(0).toUpperCase()
  777. },
  778. success: function (response) {
  779. $('#pageLoader').hide();
  780. if (response && response.BIRTH && response.BIRTH.length > 0) {
  781. console.log("birthdetails:",response);
  782. let html = `
  783. <table id="birthDataTable" class="table table-bordered table-striped">
  784. <thead>
  785. <tr>
  786. <th>S.No</th>
  787. <th>Reg No</th>
  788. <th>Child Name</th>
  789. <th>Father</th>
  790. <th>Mother</th>
  791. <th>DOB</th>
  792. <th>Certificate Link</th>
  793. </tr>
  794. </thead>
  795. <tbody>`;
  796. response.BIRTH.forEach((row, index) => {
  797. html += `<tr>
  798. <td>${index + 1}</td>
  799. <td>${row.REGNO}</td>
  800. <td>${row.CHILDNAME}</td>
  801. <td>${row.FATHERNAME}</td>
  802. <td>${row.MOTHERNAME}</td>
  803. <td>${row.DOB}</td>
  804. <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
  805. onclick="saveCertificateLog('${row.REGNO}', '${row.DOB}', '${row.ENGLISHURL}', 'Birth')">View</a>` : 'N/A'}</td>
  806. </tr>`;
  807. });
  808. html += `</tbody></table>`;
  809. $('#birthModalBody').html(html);
  810. setTimeout(() => {
  811. $('#birthDataTable').DataTable({
  812. responsive: true,
  813. pagingType: "full_numbers", // Buttons for pagination
  814. language: {
  815. search: "🔍 Search: ",
  816. emptyTable: "No records found",
  817. paginate: {
  818. previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
  819. next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
  820. }
  821. },
  822. columnDefs: [
  823. { orderable: false, targets: 0 } // Disable sorting on S.No
  824. ]
  825. });
  826. }, 100);
  827. }
  828. else {
  829. $('#birthModalBody').html('<p class="text-danger">No birth records found.</p>');
  830. }
  831. const modal = new bootstrap.Modal(document.getElementById('birthModal'));
  832. modal.show();
  833. },
  834. error: function (xhr) {
  835. $('#pageLoader').hide();
  836. let message = "Something went wrong.";
  837. if (xhr.responseJSON && xhr.responseJSON.message) {
  838. message = xhr.responseJSON.message;
  839. }
  840. alert("Error: " + message);
  841. }
  842. });
  843. }
  844. function fetchDeathData() {
  845. const dod = document.getElementById('dateofdeath').value;
  846. const gender = document.querySelector('input[name="deathgender"]:checked')?.value;
  847. const captchaInput = document.getElementById('death-captcha-input');
  848. // console.log("gender:", gender);
  849. // Validate Date of Birth
  850. if (!dod) {
  851. Swal.fire({
  852. icon: 'warning',
  853. title: 'Missing Date of Birth',
  854. text: 'Please enter your Date of Birth.'
  855. });
  856. return;
  857. }
  858. // Validate Gender
  859. if (!gender) {
  860. Swal.fire({
  861. icon: 'warning',
  862. title: 'Missing Gender Selection',
  863. text: 'Please select a gender.'
  864. });
  865. return;
  866. }
  867. if (!validateCaptcha('death')) {
  868. //captchaInput.classList.add('is-invalid');
  869. //captchaInput.focus();
  870. return;
  871. } else {
  872. captchaInput.classList.remove('is-invalid');
  873. }
  874. const formattedDod = dod.split("-").reverse().join("/"); // Convert yyyy-MM-dd to dd/MM/yyyy
  875. // console.log("dod:", formattedDod);
  876. $('#pageLoader').show();
  877. $.ajax({
  878. url: '/crs/api/death-details',
  879. method: 'GET',
  880. data: {
  881. dod: formattedDod,
  882. sex: gender.charAt(0).toUpperCase()
  883. },
  884. success: function (response) {
  885. $('#pageLoader').hide();
  886. if (response && response.DEATH && response.DEATH.length > 0) {
  887. let html = '<table id="deathDataTable" class="table table-bordered"><thead><tr>' +
  888. '<th>S.No</th><th>Reg No</th><th>Person Name</th>' +
  889. '<th>Father Name</th><th>Mother Name</th><th>DOD</th><th>Certificate Link</th></tr></thead><tbody>';
  890. response.DEATH.forEach((row ,index) => {
  891. html += `<tr>
  892. <td>${index + 1}</td>
  893. <td>${row.REGNO}</td>
  894. <td>${row.DEATHPERSONNAME}</td>
  895. <td>${row.FATHERNAME}</td>
  896. <td>${row.MOTHERNAME}</td>
  897. <td>${row.DOD}</td>
  898. <td>${row.ENGLISHURL ? `<a href="${row.ENGLISHURL}" target="_blank"
  899. onclick="saveCertificateLog('${row.REGNO}', '${row.DOD}', '${row.ENGLISHURL}', 'Death')">View</a>` : 'N/A'}</td> </tr>`;
  900. });
  901. html += '</tbody></table>';
  902. $('#deathModalBody').html(html);
  903. // Delay initialization to ensure DOM is ready
  904. setTimeout(() => {
  905. $('#deathDataTable').DataTable({
  906. responsive: true,
  907. pagingType: "full_numbers", // Buttons for pagination
  908. language: {
  909. search: "🔍 Search: ",
  910. emptyTable: "No records found",
  911. paginate: {
  912. previous: "<button class='btn btn-outline-primary btn-sm'>Previous</button>",
  913. next: "<button class='btn btn-outline-primary btn-sm'>Next</button>"
  914. }
  915. },
  916. columnDefs: [
  917. { orderable: false, targets: 0 } // Disable sorting on S.No
  918. ]
  919. });
  920. }, 100);
  921. } else {
  922. $('#deathModalBody').html('<p class="text-danger">No deathrecords found.</p>');
  923. }
  924. const modal = new bootstrap.Modal(document.getElementById('deathModal'));
  925. modal.show();
  926. },
  927. error: function (xhr) {
  928. $('#pageLoader').hide();
  929. let message = "Something went wrong.";
  930. if (xhr.responseJSON && xhr.responseJSON.message) {
  931. message = xhr.responseJSON.message;
  932. }
  933. alert("Error: " + message);
  934. }
  935. });
  936. }
  937. function saveCertificateLog(regNo, eventDate, url, service){
  938. $.ajax({
  939. url: '/crs/api/saveCertificateLogs',
  940. type: 'POST',
  941. data: {
  942. regNo: regNo,
  943. eventDate: eventDate,
  944. Url: url,
  945. service: service
  946. },
  947. success: function() {
  948. //console.log('View logged successfully');
  949. },
  950. error: function(xhr, status, error) {
  951. console.error('Logging failed:', error);
  952. }
  953. });
  954. }
  955. </script>
  956. </body>
  957. </html>