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.

1249 lines
35 KiB

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