6 Commits 4443bc47cf ... 0124ef991b

Autore SHA1 Messaggio Data
  Md Mozahidur Rahman 0124ef991b Journal Paper retouc 1 anno fa
  Md Mozahidur Rahman 732abab785 Navigation edited 1 anno fa
  Md Mozahidur Rahman 6d86f22fda Journal Paper modified 1 anno fa
  Md Mozahidur Rahman 16a2491125 Menu API updated 1 anno fa
  Md Mozahidur Rahman 5f00a8c42b Dynamic global menu is working fine 1 anno fa
  Md Mozahidur Rahman d1026a1409 Dynamic global menu is working fine 1 anno fa

File diff suppressed because it is too large
+ 490 - 558
css/theme-styles.css


+ 69 - 55
functions.php

@@ -171,9 +171,9 @@ function uiu_cse_header_menu()
 {
 	register_nav_menus(
 		array(
-			'uiu-header-menu' => __('UIU Header'),
-			'cse-header-menu' => __('CSE Header Menu'),
-			'uiu-footer-menu' => __('UIU Footer Menu')
+			'uiu-global-header-menu' => __('UIU Global Header Menu'),
+			'uiu-departmental-header-menu' => __('UIU Departmental Header Menu'),
+			'uiu-global-footer-menu' => __('UIU Global Footer Menu')
 		)
 	);
 }
@@ -260,78 +260,92 @@ function uiu_acf_update_user_id($value, $post_id, $field)
 add_filter('acf/update_value/name=employeeid', 'uiu_acf_update_user_id', 10, 3);
 
 
+// function fetch_conference_data($params)
+// {
+// 	$auth_token = get_field('auth_token', 'option');
+// 	$client_id = get_field('client_id', 'option');
+// 	$conference_api = get_field('conference_api', 'option');
+
+// 	$curl = curl_init();
+
+// 	curl_setopt_array($curl, array(
+// 		CURLOPT_URL => $conference_api,
+// 		CURLOPT_RETURNTRANSFER => true,
+// 		CURLOPT_ENCODING => '',
+// 		CURLOPT_MAXREDIRS => 10,
+// 		CURLOPT_TIMEOUT => 0,
+// 		CURLOPT_FOLLOWLOCATION => true,
+// 		CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+// 		CURLOPT_CUSTOMREQUEST => 'POST',
+// 		CURLOPT_POSTFIELDS => '{
+// 			"auth_token" : "' . $auth_token . '",
+//             "user_login_id" : "' . $client_id . '",
+
+//             "employee_id" : ' . isset($params["author"]) ? " " : " " . ',
+//             "fromYear" : ' . $params["fromYear"] ?? " " . ',
+//     		"toYear" : ' . $params["toYear"] . ',
+// 			"page" : ' . $params["page"] . ',
+// 			"limit" : ' . $params["limit"] . '
+//         }',
+// 		CURLOPT_HTTPHEADER => array(
+// 			'Content-Type: application/json'
+// 		),
+// 	));
+
+// 	$response = curl_exec($curl);
+// 	curl_close($curl);
+// 	$response = json_decode($response, true);
+
+// 	return  $response;
+// }
+
+// function uiu_conference_route_menu_with_params(WP_REST_Request $request)
+// {
+// 	// $arg = $request->get_param('limit');
+// 	$params = $request->get_params();
+// 	// var_dump($params);
+
+// 	return fetch_conference_data($params);
+// }
+
+
+// add_action("rest_api_init", function () {
+// 	register_rest_route("uiu_api", "/conference", [
+// 		"methods" => "GET",
+// 		"callback" => "uiu_conference_route_menu_with_params",
+// 	]);
+// });
+
+
+
 /**
  * Make theme option page field value available via REST API
  */
-function theme_options_route_menu()
+function theme_options_route_menu_global_header()
 {
-	return get_field('menu_rich_contents', 'option');
+	return get_field('global_menu_rich_contents', 'option');
 }
-
 add_action("rest_api_init", function () {
-	register_rest_route("options", "/menu", [
+	register_rest_route("options/menu", "/global-header", [
 		"methods" => "GET",
-		"callback" => "theme_options_route_menu",
+		"callback" => "theme_options_route_menu_global_header",
 	]);
 });
 
 
-function fetch_conference_data($limit)
-{
-	$auth_token = get_field('auth_token', 'option');
-	$client_id = get_field('client_id', 'option');
-	$conference_api = get_field('conference_api', 'option');
-
-	$curl = curl_init();
-
-	curl_setopt_array($curl, array(
-		CURLOPT_URL => $conference_api,
-		CURLOPT_RETURNTRANSFER => true,
-		CURLOPT_ENCODING => '',
-		CURLOPT_MAXREDIRS => 10,
-		CURLOPT_TIMEOUT => 0,
-		CURLOPT_FOLLOWLOCATION => true,
-		CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
-		CURLOPT_CUSTOMREQUEST => 'POST',
-		CURLOPT_POSTFIELDS => '{
-            "employee_id" : " ",
-            "year" : " ",
-            "auth_token" : "' . $auth_token . '",
-            "user_login_id" : "' . $client_id . '",
-			 "page" : 1,
-			 "limit" : ' . $limit . '
-        }',
-		CURLOPT_HTTPHEADER => array(
-			'Content-Type: application/json'
-		),
-	));
-
-	$response = curl_exec($curl);
-	curl_close($curl);
-	$response = json_decode($response, true);
-
-	return  $response;
-}
 
-function uiu_conference_route_menu_with_params(WP_REST_Request $request)
+function theme_options_route_menu_departmental_header()
 {
-	$arg = $request->get_param('limit');
-	//   $params = $request->get_params();
-	//    var_dump( $arg );
-
-	return fetch_conference_data($arg);
+	return get_field('departmental_menu_rich_contents', 'option');
 }
-
-
 add_action("rest_api_init", function () {
-	register_rest_route("uiu_api", "/conference", [
+	register_rest_route("options/menu", "/departmental-header", [
 		"methods" => "GET",
-		"callback" => "uiu_conference_route_menu_with_params",
+		"callback" => "theme_options_route_menu_departmental_header",
 	]);
 });
 
 
-
 add_action('rest_api_init', function () {
 	header("Access-Control-Allow-Origin: *");
 });

+ 22 - 17
header.php

@@ -9,8 +9,8 @@
  *
  * @package UIU_CSE
  */
-
 ?>
+
 <!doctype html>
 <html <?php language_attributes(); ?>>
 
@@ -18,7 +18,6 @@
 	<meta charset="<?php bloginfo('charset'); ?>">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="profile" href="https://gmpg.org/xfn/11">
-
 	<?php wp_head(); ?>
 </head>
 
@@ -26,31 +25,37 @@
 	<?php wp_body_open(); ?>
 	<div id="page" class="site">
 		<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e('Skip to content', 'uiu-cse'); ?></a>
-
 		<header id="navbar">
-
 			<section id="uiu-global-nav">
-
 				<nav class="container-fluid">
-
 					<div class="logo-close-menu">
-
-						<a class="logo" href="<?php echo get_site_url(); ?>"> <img src="<?php echo (get_header_image()); ?>" alt="<?php echo (get_bloginfo('title')); ?>" /></a>
-
-						<a id="menu-bars" class="material-icons">
+						<span id="menu-bars" class="material-icons">
 							menu
-						</a>
+						</span>
+						<a class="logo" href="<?php echo get_site_url(); ?>"> <img src="<?php echo (get_header_image()); ?>" alt="<?php echo (get_bloginfo('title')); ?>" /></a>
+						<span id="seacrh" class="seacrh material-symbols-outlined" onclick="openSearch()">
+							search
+						</span>
 					</div>
-
-					<?php wp_nav_menu(array('theme_location' => 'uiu-header-menu', 'container_class' => 'custom-menu-class'));
+					<?php wp_nav_menu(array('theme_location' => 'uiu-global-header-menu', 'container_class' => 'uiu-global-header-menu'));
 					?>
-
 				</nav>
-
 			</section>
 
-
-
+			<section id="uiu-departmental-nav">
+				<nav class="container-fluid">
+					<div id="responsive-btn" class="dep-name-res-icon">
+						<span class="department">
+							Departmental Menu of CSE
+						</span>
+						<span class="responsive-btn material-symbols-outlined">
+							filter_list
+						</span>
+					</div>
+					<?php wp_nav_menu(array('theme_location' => 'uiu-departmental-header-menu', 'container_class' => 'uiu-departmental-header-menu'));
+					?>
+				</nav>
+			</section>
 		</header>
 
 

BIN
img/journal-paper.jpg


+ 134 - 4
inc/acf-json/group_648ad0b0ca222.json

@@ -21,7 +21,7 @@
         },
         {
             "key": "field_648b021524f7d",
-            "label": "Header Menu Contents",
+            "label": "Global Menu Contents",
             "name": "",
             "aria-label": "",
             "type": "tab",
@@ -38,8 +38,8 @@
         },
         {
             "key": "field_648ad18328484",
-            "label": "Menu Rich contents",
-            "name": "menu_rich_contents",
+            "label": "Global Menu Rich contents",
+            "name": "global_menu_rich_contents",
             "aria-label": "",
             "type": "repeater",
             "instructions": "",
@@ -148,6 +148,136 @@
                     "parent_repeater": "field_648ad18328484"
                 }
             ]
+        },
+        {
+            "key": "field_64901ac1c8176",
+            "label": "Departmental Menu Contents",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "placement": "left",
+            "endpoint": 0
+        },
+        {
+            "key": "field_64901a6bc8171",
+            "label": "Departmental Menu Rich contents",
+            "name": "departmental_menu_rich_contents",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "table",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Add Row",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_64901a6bc8172",
+                    "label": "Parent Navigation Label",
+                    "name": "parent_navigation_label",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "parent_repeater": "field_64901a6bc8171"
+                },
+                {
+                    "key": "field_64901a6bc8173",
+                    "label": "Menu Feature Image",
+                    "name": "menu_feature_image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "url",
+                    "library": "all",
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "preview_size": "medium",
+                    "parent_repeater": "field_64901a6bc8171"
+                },
+                {
+                    "key": "field_64901a6bc8174",
+                    "label": "Menu Title",
+                    "name": "menu_title",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "parent_repeater": "field_64901a6bc8171"
+                },
+                {
+                    "key": "field_64901a6bc8175",
+                    "label": "Menu Description",
+                    "name": "menu_description",
+                    "aria-label": "",
+                    "type": "textarea",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "rows": 5,
+                    "placeholder": "",
+                    "new_lines": "",
+                    "parent_repeater": "field_64901a6bc8171"
+                }
+            ]
         }
     ],
     "location": [
@@ -168,5 +298,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 1,
-    "modified": 1687070795
+    "modified": 1687181501
 }

+ 59 - 65
js/theme-settings.js

@@ -2,50 +2,28 @@
 
 // const sidebar = document.querySelector('#sidebar')
 
+// window.onscroll = function () {
+//   let navbar = document.querySelector("#navbar");
+//   let secondNav = document.querySelector("nav#second-nav");
+//   if (window.scrollY > 300) {
+//     if (navbar) navbar.classList.add("second-nav-active");
+//     navbar.classList.add("nav-resp");
+//   } else {
+//     if (navbar) navbar.classList.remove("second-nav-active");
+//     navbar.classList.remove("nav-resp");
+//   }
+// };
+
+// scroll responsive
 window.onscroll = function () {
   let navbar = document.querySelector("#navbar");
-  let secondNav = document.querySelector("nav#second-nav");
   if (window.scrollY > 300) {
-    if (navbar) navbar.classList.add("second-nav-active");
-    navbar.classList.add("nav-resp");
+    if (navbar) navbar.classList.add("scroll");
   } else {
-    if (navbar) navbar.classList.remove("second-nav-active");
-    navbar.classList.remove("nav-resp");
+    if (navbar) navbar.classList.remove("scroll");
   }
 };
 
-// show mega menu in upper nav
-// const menuItem = document.querySelectorAll(".menu-item");
-
-// // const allMenuBtn = document.querySelectorAll(".menu-btn");
-// const allMenuContent = document.querySelectorAll(".menu-content");
-
-// if (menuItem) {
-//   menuItem.forEach((item) => {
-//     const menuBtn = item.querySelector(".menu-btn");
-//     const menuContent = item.querySelector(".menu-content");
-
-//     menuBtn.addEventListener("click", () => {
-//       if (menuContent) {
-//         menuContent.classList.toggle("show-mega-menu");
-//         item.classList.toggle("active");
-//       }
-
-//       menuItem.forEach((singleItem) => {
-//         if (singleItem !== item) {
-//           singleItem.classList.remove("active");
-//         }
-//       });
-
-//       allMenuContent.forEach((content) => {
-//         if (menuContent !== content) {
-//           content.classList.remove("show-mega-menu");
-//           // item.classList.remove('active')
-//         }
-//       });
-//     });
-//   });
-// }
 // show mega menu in upper nav
 const menuItem = document.querySelectorAll("#navbar .menu > .menu-item");
 
@@ -81,41 +59,50 @@ if (menuItem) {
 
 // toggle responsive menu
 
-const toggleBtn = document.getElementById("menu-bars");
+// global menu
+const toggleBtnGlobal = document.getElementById("menu-bars");
 
-const menuContainer = document.querySelector("#uiu-global-nav .menu");
+const menuContainerGlobal = document.querySelector("#uiu-global-nav .menu");
 
-if (toggleBtn && menuContainer) {
-  toggleBtn.addEventListener("click", () => {
-    menuContainer.classList.toggle("show");
+if (toggleBtnGlobal && menuContainerGlobal) {
+  toggleBtnGlobal.addEventListener("click", () => {
+    menuContainerGlobal.classList.toggle("show");
   });
 }
 
-// fetch submenu extra item data
+// department menu
+const toggleBtnDepartment = document.getElementById("responsive-btn");
 
-const fetchMenudata = async () => {
-  try {
-    const res = await fetch("https://cse.uiu.local/wp-json/options/menu", {
-      method: "GET",
-    });
-    const data = await res.json();
+const menuContainerDepartment = document.querySelector("#uiu-departmental-nav");
 
-    return data;
-  } catch (error) {
-    console.log(`Error: ${error}`);
-  }
-};
+if (toggleBtnDepartment && menuContainerDepartment) {
+  toggleBtnDepartment.addEventListener("click", () => {
+    menuContainerDepartment.classList.toggle("show");
+  });
+}
 
-fetchMenudata().then((data) => {
-  // adding menu data into html
-  addDataToMenu(data);
-});
+// fetch submenu extra item data
+const addMenuFeature = (url, parentClass) => {
+  const fetchMenudata = async () => {
+    try {
+      const res = await fetch(url, { method: "GET" });
+      const data = await res.json();
+
+      return data;
+    } catch (error) {
+      console.log(`Error: ${error}`);
+    }
+  };
+
+  fetchMenudata().then((data) => {
+    // adding menu data into html
+    addDataToMenu(data);
+  });
 
-function addDataToMenu(data) {
-  if (data) {
-    const menuItem = document.querySelectorAll(".menu-item");
+  function addDataToMenu(data) {
+    if (data) {
+      const menuItem = document.querySelectorAll(`.${parentClass} .menu-item`);
 
-    if (menuItem) {
       menuItem.forEach((item) => {
         const targetData = data.find((data) =>
           item.innerHTML
@@ -123,8 +110,6 @@ function addDataToMenu(data) {
             .includes(data.parent_navigation_label.toLowerCase())
         );
 
-        console.log(targetData);
-
         const menuTitle = item.querySelector(".menu_title");
 
         const menuDesc = item.querySelector(".menu_description");
@@ -145,7 +130,16 @@ function addDataToMenu(data) {
       });
     }
   }
-}
+};
+
+// add content in global menu
+addMenuFeature("/wp-json/options/menu/global-header", "uiu-global-header-menu");
+
+// add content in departmentalmenu menu
+addMenuFeature(
+  "/wp-json/options/menu/departmental-header",
+  "uiu-departmental-header-menu"
+);
 
 // fetch submenu extra item data end
 

+ 0 - 450
page-template/page-conferences.php → page-template/page-conference-test.php

@@ -202,456 +202,6 @@ get_header(); ?>
 <?php endwhile; // end of the loop.
 ?>
 <style>
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    * {
-        font-family: "Open Sans", sans-serif;
-        margin: 0px auto;
-        padding: 0px;
-    }
-
-    p {
-        font-size: 16px !important;
-        line-height: 30px;
-        color: #4e4e4e !important;
-        margin: 0 auto;
-    }
-
-    .grid {
-        gap: 30px;
-    }
-
-    body {
-        overflow-y: scroll;
-        overflow-x: hidden;
-    }
-
-    section {
-        background: #fff;
-        margin: 0 auto;
-    }
-
-    header {
-        margin: 0px;
-        padding: 0px !important;
-        height: 50px;
-        overflow: hidden;
-    }
-
-    main {
-        position: relative;
-        padding: 0px !important;
-        background-color: #fff;
-    }
-
-    h1 {
-        font-size: 40px !important;
-        letter-spacing: 2px !important;
-        line-height: 100%;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-weight: normal;
-        margin-bottom: 0px !important;
-    }
-
-    button {
-        margin: 40px auto;
-        margin-bottom: 30px;
-        max-width: 300px;
-        font-size: 20px;
-        border-radius: 0px;
-        border: none;
-        border-radius: 4px;
-        background: #f68b1f;
-        transition-duration: 0.3s;
-    }
-
-    button:hover {
-        background: #117cf7;
-    }
-
-    .container {
-        margin: 0px auto;
-        padding: 10px 10px;
-        max-width: 1200px !important;
-    }
-
-    .container-fluid {
-        padding: 0px !important;
-    }
-
-    #search-close {
-        width: 100px;
-        border-radius: 40px;
-        background-color: #F68B1F;
-        margin-top: 30px;
-        margin-right: 30px;
-    }
-
-    .overlay-content {
-        overflow: hidden;
-    }
-
-    .overlay-content label {
-        display: inline-block;
-    }
-
-    .overlay-content h4 {
-        display: inline-block;
-        margin: 0px 20px;
-    }
-
-    .overlay-content div a {
-        display: inline-block;
-        text-decoration: underline;
-    }
-
-    .overlay-content div h6 {
-        display: inline-block;
-    }
-
-    #search-bar {
-        width: 60%;
-        display: inline-block;
-    }
-
-    #search-button {
-        width: 300px;
-        display: inline-block;
-        border-radius: 30px;
-        margin-left: 20px;
-        background: #485680;
-    }
-
-    #search-modal {
-        overflow: hidden;
-    }
-
-    #search-button:hover {
-        background-color: #F68B1F;
-    }
-
-    #first-nav>ul>img {
-        transition-duration: 0.5s;
-    }
-
-    section#first-nav-section nav {
-        position: fixed;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 70px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
-
-    section#first-nav-section nav ul {
-        align-items: center;
-        z-index: 3;
-    }
-
-    section#first-nav-section nav ul img {
-        height: 50px;
-        width: auto;
-        margin-right: 30px;
-        padding-left: 20px;
-    }
-
-    section#first-nav-section nav ul>li {
-        margin-right: 50px;
-    }
-
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0px;
-    }
-
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0;
-    }
-
-    section#first-nav-section nav ul>li>a {
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 12px;
-    }
-
-    section#first-nav-section nav ul>li:after {
-        content: "";
-        display: block;
-        margin: auto;
-        height: 1px;
-        width: 0px;
-        background: transparent;
-        transition: width 0.3s ease, background-color 0.5s ease;
-    }
-
-    section#first-nav-section nav ul>li:hover:after {
-        width: 100%;
-        background: #fff;
-    }
-
-    section#first-nav-section .nav-resp {
-        height: 50px;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
-
-    section#first-nav-section .nav-resp ul img {
-        height: 30px !important;
-        padding-left: 20px;
-    }
-
-    section#first-nav-section .nav-resp #menu-bars {
-        padding-top: 2px;
-    }
-
-    #menu-bars {
-        display: none;
-        padding-top: 2px;
-        color: #fff;
-    }
-
-    section#second-nav-section nav {
-        position: fixed;
-        top: 70px;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 50px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background: #117cf7;
-    }
-
-    section#second-nav-section nav ul {
-        margin-top: 0px;
-        width: 100vw;
-        justify-content: space-evenly;
-        display: inline-flex;
-    }
-
-    section#second-nav-section nav ul li>a {
-        margin: 0px;
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: normal;
-        font-size: 12px;
-        border-radius: 0px;
-    }
-
-    section#second-nav-section nav ul li>a:hover {
-        border-radius: 0;
-        font-weight: bolder;
-        color: #eeffb0;
-        text-decoration: none !important;
-    }
-
-    section#second-nav-section nav ul li:first-of-type>a:hover {
-        background: none;
-    }
-
-    section#second-nav-section nav ul li>a>img {
-        height: 40px !important;
-    }
-
-    section#second-nav-section nav ul li>a>img:hover {
-        background-color: rgba(255, 255, 255, 0);
-    }
-
-    section#second-nav-section .second-nav-active {
-        height: 40px;
-        top: 50px;
-        background-color: #117cf7;
-    }
-
-    section#second-nav-section .second-nav-active ul>li>a>img {
-        height: 30px !important;
-    }
-
-    #top-search {
-        width: 140px;
-        border-radius: 0;
-        height: 30px;
-    }
-
-    @media (max-width: 1100px) {
-        #first-nav>ul {
-            position: relative;
-            width: 100%;
-            left: 0px;
-        }
-
-        #first-nav>ul>img {
-            width: 350px;
-            -o-object-fit: contain;
-            object-fit: contain;
-            margin-right: auto;
-        }
-
-        #first-nav>ul>li {
-            display: none;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: inline-block;
-            margin-right: auto;
-            width: 40px;
-        }
-
-        #top-search {
-            display: none;
-        }
-
-        #menu-bars {
-            display: inline-block;
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
-    }
-
-    @media (max-width: 576px) {
-        #menu-bars {
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>img {
-            width: 170px;
-            margin-left: 10px !important;
-        }
-
-        #search>button.filled {
-            display: none;
-        }
-
-        body>main>section:nth-child(2)>div>h1 {
-            font-size: 60px;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
-
-        #cta {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #cta>button:nth-child(2) {
-            display: none;
-        }
-
-        #second-nav-section {
-            display: none !important;
-        }
-    }
-
-    #slider-container {
-        padding: 0px !important;
-    }
-
-    .yellow-line {
-        display: block;
-        width: 100px;
-        height: 4px;
-        background-color: #00ff00;
-        margin-left: 10px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-    }
-
-    @media screen and (max-width: 800px) {
-        .yellow-line {
-            margin-left: calc(50vw - 50%) !important;
-        }
-    }
-
-    footer {
-        position: relative;
-        z-index: 30 !important;
-    }
-
-    #footer1 {
-        z-index: 10;
-        height: 400px;
-        background: url("../img/footer2.png") no-repeat;
-        background-size: cover;
-        background-position: top;
-    }
-
-    footer.container-fluid {
-        border-top: 10px solid #C85688;
-        overflow: hidden;
-        text-align: left;
-        margin: 0px;
-        padding: 0px !important;
-        background: #160c0c;
-        min-height: 350px;
-    }
-
-    footer.container-fluid h3 {
-        margin: 10px auto;
-        margin: 30px 0px;
-        font-family: "Open Sans", sans-serif;
-        font-size: 20px;
-        color: #fff;
-        font-weight: normal;
-        text-decoration: underline;
-    }
-
-    footer.container-fluid ul {
-        padding: 0px;
-    }
-
-    footer.container-fluid ul>li {
-        list-style: none;
-        margin: 0px;
-        padding: 0px;
-        line-height: 110%;
-    }
-
-    footer.container-fluid ul>li a {
-        text-decoration: none;
-        color: #fff;
-        font-size: 12px;
-        letter-spacing: 2px;
-        font-weight: normal;
-        font-family: "Open Sans", sans-serif;
-        text-transform: uppercase;
-    }
-
-    footer.container-fluid ul>li a:hover {
-        color: #F68B1F;
-        text-decoration: underline;
-    }
-
     #fine-print {
         text-align: center;
         margin: 10px auto;

+ 2 - 455
page-template/page-conference.php

@@ -90,8 +90,6 @@ get_header(); ?>
                     </ul>
                 </div>
 
-
-
             </div>
             <div class="col-md-9 col-content">
 
@@ -101,7 +99,6 @@ get_header(); ?>
                             <h3>Conference Papers</h3>
                             <?php
 
-
                             $uniqueTitles = [];
 
                             // Iterate through the data and remove duplicates
@@ -148,8 +145,8 @@ get_header(); ?>
                                         echo "<h2 class='paper-title'>{$conference['PaperTitle']}</h2>";
                                         echo "</a>";
                                         echo "<p class='paper-tags'>";
-                                        $conferenceKeyword = explode(',', $conference['Keyword']);
-                                        foreach ($conferenceKeyword as $keyword) {
+                                        // $conferenceKeyword = explode(',', $conference['Keyword']);
+                                        foreach ($conference['KeyWords'] as $keyword) {
                                             if ($keyword) {
                                                 echo "<span class='tag'>{$keyword}</span>";
                                             }
@@ -209,456 +206,6 @@ get_header(); ?>
 <?php endwhile; // end of the loop.
 ?>
 <style>
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    * {
-        font-family: "Open Sans", sans-serif;
-        margin: 0px auto;
-        padding: 0px;
-    }
-
-    p {
-        font-size: 16px !important;
-        line-height: 30px;
-        color: #4e4e4e !important;
-        margin: 0 auto;
-    }
-
-    .grid {
-        gap: 30px;
-    }
-
-    body {
-        overflow-y: scroll;
-        overflow-x: hidden;
-    }
-
-    section {
-        background: #fff;
-        margin: 0 auto;
-    }
-
-    header {
-        margin: 0px;
-        padding: 0px !important;
-        height: 50px;
-        overflow: hidden;
-    }
-
-    main {
-        position: relative;
-        padding: 0px !important;
-        background-color: #fff;
-    }
-
-    h1 {
-        font-size: 40px !important;
-        letter-spacing: 2px !important;
-        line-height: 100%;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-weight: normal;
-        margin-bottom: 0px !important;
-    }
-
-    button {
-        margin: 40px auto;
-        margin-bottom: 30px;
-        max-width: 300px;
-        font-size: 20px;
-        border-radius: 0px;
-        border: none;
-        border-radius: 4px;
-        background: #f68b1f;
-        transition-duration: 0.3s;
-    }
-
-    button:hover {
-        background: #117cf7;
-    }
-
-    .container {
-        margin: 0px auto;
-        padding: 10px 10px;
-        max-width: 1200px !important;
-    }
-
-    .container-fluid {
-        padding: 0px !important;
-    }
-
-    #search-close {
-        width: 100px;
-        border-radius: 40px;
-        background-color: #F68B1F;
-        margin-top: 30px;
-        margin-right: 30px;
-    }
-
-    .overlay-content {
-        overflow: hidden;
-    }
-
-    .overlay-content label {
-        display: inline-block;
-    }
-
-    .overlay-content h4 {
-        display: inline-block;
-        margin: 0px 20px;
-    }
-
-    .overlay-content div a {
-        display: inline-block;
-        text-decoration: underline;
-    }
-
-    .overlay-content div h6 {
-        display: inline-block;
-    }
-
-    #search-bar {
-        width: 60%;
-        display: inline-block;
-    }
-
-    #search-button {
-        width: 300px;
-        display: inline-block;
-        border-radius: 30px;
-        margin-left: 20px;
-        background: #485680;
-    }
-
-    #search-modal {
-        overflow: hidden;
-    }
-
-    #search-button:hover {
-        background-color: #F68B1F;
-    }
-
-    #first-nav>ul>img {
-        transition-duration: 0.5s;
-    }
-
-    section#first-nav-section nav {
-        position: fixed;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 70px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
-
-    section#first-nav-section nav ul {
-        align-items: center;
-        z-index: 3;
-    }
-
-    section#first-nav-section nav ul img {
-        height: 50px;
-        width: auto;
-        margin-right: 30px;
-        padding-left: 20px;
-    }
-
-    section#first-nav-section nav ul>li {
-        margin-right: 50px;
-    }
-
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0px;
-    }
-
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0;
-    }
-
-    section#first-nav-section nav ul>li>a {
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 12px;
-    }
-
-    section#first-nav-section nav ul>li:after {
-        content: "";
-        display: block;
-        margin: auto;
-        height: 1px;
-        width: 0px;
-        background: transparent;
-        transition: width 0.3s ease, background-color 0.5s ease;
-    }
-
-    section#first-nav-section nav ul>li:hover:after {
-        width: 100%;
-        background: #fff;
-    }
-
-    section#first-nav-section .nav-resp {
-        height: 50px;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
-
-    section#first-nav-section .nav-resp ul img {
-        height: 30px !important;
-        padding-left: 20px;
-    }
-
-    section#first-nav-section .nav-resp #menu-bars {
-        padding-top: 2px;
-    }
-
-    #menu-bars {
-        display: none;
-        padding-top: 2px;
-        color: #fff;
-    }
-
-    section#second-nav-section nav {
-        position: fixed;
-        top: 70px;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 50px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background: #117cf7;
-    }
-
-    section#second-nav-section nav ul {
-        margin-top: 0px;
-        width: 100vw;
-        justify-content: space-evenly;
-        display: inline-flex;
-    }
-
-    section#second-nav-section nav ul li>a {
-        margin: 0px;
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: normal;
-        font-size: 12px;
-        border-radius: 0px;
-    }
-
-    section#second-nav-section nav ul li>a:hover {
-        border-radius: 0;
-        font-weight: bolder;
-        color: #eeffb0;
-        text-decoration: none !important;
-    }
-
-    section#second-nav-section nav ul li:first-of-type>a:hover {
-        background: none;
-    }
-
-    section#second-nav-section nav ul li>a>img {
-        height: 40px !important;
-    }
-
-    section#second-nav-section nav ul li>a>img:hover {
-        background-color: rgba(255, 255, 255, 0);
-    }
-
-    section#second-nav-section .second-nav-active {
-        height: 40px;
-        top: 50px;
-        background-color: #117cf7;
-    }
-
-    section#second-nav-section .second-nav-active ul>li>a>img {
-        height: 30px !important;
-    }
-
-    #top-search {
-        width: 140px;
-        border-radius: 0;
-        height: 30px;
-    }
-
-    @media (max-width: 1100px) {
-        #first-nav>ul {
-            position: relative;
-            width: 100%;
-            left: 0px;
-        }
-
-        #first-nav>ul>img {
-            width: 350px;
-            -o-object-fit: contain;
-            object-fit: contain;
-            margin-right: auto;
-        }
-
-        #first-nav>ul>li {
-            display: none;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: inline-block;
-            margin-right: auto;
-            width: 40px;
-        }
-
-        #top-search {
-            display: none;
-        }
-
-        #menu-bars {
-            display: inline-block;
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
-    }
-
-    @media (max-width: 576px) {
-        #menu-bars {
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>img {
-            width: 170px;
-            margin-left: 10px !important;
-        }
-
-        #search>button.filled {
-            display: none;
-        }
-
-        body>main>section:nth-child(2)>div>h1 {
-            font-size: 60px;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
-
-        #cta {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #cta>button:nth-child(2) {
-            display: none;
-        }
-
-        #second-nav-section {
-            display: none !important;
-        }
-    }
-
-    #slider-container {
-        padding: 0px !important;
-    }
-
-    .yellow-line {
-        display: block;
-        width: 100px;
-        height: 4px;
-        background-color: #00ff00;
-        margin-left: 10px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-    }
-
-    @media screen and (max-width: 800px) {
-        .yellow-line {
-            margin-left: calc(50vw - 50%) !important;
-        }
-    }
-
-    footer {
-        position: relative;
-        z-index: 30 !important;
-    }
-
-    #footer1 {
-        z-index: 10;
-        height: 400px;
-        background: url("../img/footer2.png") no-repeat;
-        background-size: cover;
-        background-position: top;
-    }
-
-    footer.container-fluid {
-        border-top: 10px solid #C85688;
-        overflow: hidden;
-        text-align: left;
-        margin: 0px;
-        padding: 0px !important;
-        background: #160c0c;
-        min-height: 350px;
-    }
-
-    footer.container-fluid h3 {
-        margin: 10px auto;
-        margin: 30px 0px;
-        font-family: "Open Sans", sans-serif;
-        font-size: 20px;
-        color: #fff;
-        font-weight: normal;
-        text-decoration: underline;
-    }
-
-    footer.container-fluid ul {
-        padding: 0px;
-    }
-
-    footer.container-fluid ul>li {
-        list-style: none;
-        margin: 0px;
-        padding: 0px;
-        line-height: 110%;
-    }
-
-    footer.container-fluid ul>li a {
-        text-decoration: none;
-        color: #fff;
-        font-size: 12px;
-        letter-spacing: 2px;
-        font-weight: normal;
-        font-family: "Open Sans", sans-serif;
-        text-transform: uppercase;
-    }
-
-    footer.container-fluid ul>li a:hover {
-        color: #F68B1F;
-        text-decoration: underline;
-    }
-
     #fine-print {
         text-align: center;
         margin: 10px auto;

+ 352 - 786
page-template/page-journal.php

@@ -26,8 +26,6 @@ get_header(); ?>
         CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
         CURLOPT_CUSTOMREQUEST => 'POST',
         CURLOPT_POSTFIELDS => '{
-            "employee_id" : " ",
-            "year" : " ",
             "auth_token" : "' . $auth_token . '",
             "user_login_id" : "' . $client_id . '"
         }',
@@ -40,973 +38,541 @@ get_header(); ?>
     curl_close($curl);
     $response = json_decode($response, true);
 
-
-    // Decode the JSON data
-    $data = json_decode($data, true);
-
-    // Array to store unique paper titles
-    $uniquePaperTitles = [];
-
-    // Iterate over the data and extract unique paper titles
-    foreach ($response as $entry) {
-        foreach ($entry['JournalList'] as $journal) {
-            $paperTitle = $journal['PaperTitle'];
-            if (!in_array($paperTitle, $uniquePaperTitles)) {
-                $uniquePaperTitles[] = $paperTitle;
-            }
-        }
-    }
-
-    // Output the unique paper titles
-    foreach ($uniquePaperTitles as $title) {
-        echo $title . "\n";
-    }
-
 ?>
-
     <main id="main" class="site-main" role="main">
 
-        <div class="">
+        <section id="archive-hero">
 
+            <div class="container">
 
-            <section class="container-fluid">
+                <!-- breadcrumb -->
+                <nav aria-label="breadcrumb">
+                    <ul>
+                        <li><a href="#"> Home </a></li>
+                        <li><a href="#">Research</a></li>
+                        <li>Journal Paper</li>
+                    </ul>
+                </nav>
 
-                <div class="banner-img-holder">
-                    <div class="banner-overlay">
+                <div class="content">
 
-                    </div>
+                    <!-- left content -->
+                    <div class="left-content">
 
-                    <img class="banner-img" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
+                        <div class="main-title">Journal Paper</div>
 
-                    <div class="banner-title">
-                        <h1>
-                            Research at <br> Department of <br>
-                            Computer Science &amp; Engineering
-                        </h1>
-                    </div>
+                        <div class="short-details">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor ducimus eius magni non.
+                        </div>
 
-                </div>
+                        <div class="links">
 
+                            <!-- message -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
+                            </a>
 
-            </section>
+                            <!-- printer -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
+                            </a>
 
-            <section id="breadcrumb" class="container">
-                <div>
-                    <span class="crumbs">Department of CSE > Research > Journals</span>
-                </div>
-            </section>
+                            <!-- facebook -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
+                            </a>
 
-        </div>
-
-        <div class="row container">
-            <div class="col-md-3 col-sidebar">
+                            <!-- twitter -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
+                            </a>
 
-                <div class="generic-para sidebar-links">
-                    <h3>Research</h3>
-                    <ul>
-                        <li><a href="#">Conference Papers</a></li>
-                        <li class="active"><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                    </ul>
-                </div>
+                            <!-- linkedin -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
+                            </a>
 
+                        </div>
 
+                    </div>
 
-            </div>
-            <div class="col-md-9 col-content">
-
-                <div class="sections">
-                    <section id="conference-papers-section" class="container generic-content" data-theme="light">
-                        <div class="generic-para shadowed">
-                            <h3>Journal Papers</h3>
-                            <?php
-                            foreach ($response as $item) {
-                                // Access individual elements of each response
-                                echo "<div class='paper-details'>";
-                                echo "<span class='paper-year'>{$item['Year']}</span>";
-
-                                // Iterate over the JournalList array within each item
-                                foreach ($item['JournalList'] as $journal) {
-                                    // Access individual elements of each journal
-                                    echo "<a href='{$journal['JournalLink']}'>";
-                                    echo "<h2 class='paper-title'>{$journal['PaperTitle']}</h2>";
-                                    echo "</a>";
-                                    echo "<p class='paper-tags'>";
-                                    $journalKeyword = explode(',', $journal['Keyword']);
-                                    foreach ($journalKeyword as $keyword) {
-                                        if ($keyword) {
-                                            echo "<span class='tag'>{$keyword}</span>";
-                                        }
-                                    }
-                                    echo "</p>";
-                                    echo "<p class='paper-event'><i>Publication: </i> {$journal['JournalTitle']}</p>";
-                                    echo "<p class='paper-contributors'>";
-                                    echo "<i>Authors: </i>";
-                                    // Iterate over the Author array within each journal
-                                    foreach ($journal['Author'] as $author) {
-                                        // Access individual elements of each author
-                                        $authorName = $author['AuthorName'];
-                                        // Process or output the values as needed
-                                        echo " $authorName,";
-                                    }
-                                    echo "</p>";
-                                }
-                                echo "</div>";
-                            }
-                            ?>
+                    <!-- right content -->
+                    <div class="right-content">
+                        <img src="<?php echo (get_template_directory_uri()) ?>/img/journal-paper.jpg" alt="">
+                    </div>
 
-                        </div>
-                    </section>
                 </div>
             </div>
-        </div>
-    </main>
-    <!-- #main -->
 
 
-    <script>
-        // var myHeaders = new Headers();
-        // myHeaders.append("Content-Type", "application/json");
 
-        // var raw = JSON.stringify({
-        //     "employee_id": "",
-        //     "year": "",
-        //     "user_login_id": "api_user",
-        //     "auth_token": "api_user20230419045143",
-        //     "page": 1,
-        //     "limit": 3
-        // });
+        </section>
 
-        // var requestOptions = {
-        //     method: 'POST',
-        //     headers: myHeaders,
-        //     body: raw,
-        //     redirect: 'follow'
-        // };
 
-        // fetch("http://103.109.52.3/webapi/api/EmployeeJournal", requestOptions)
-        //     .then(response => response.text())
-        //     .then(result => console.log(result))
-        //     .catch(error => console.log('error', error));
-    </script>
 
 
+        <div class="container">
 
-<?php endwhile; // end of the loop.
-?>
-<style>
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
+            <section id="resarch-paper-container">
 
-    * {
-        font-family: "Open Sans", sans-serif;
-        margin: 0px auto;
-        padding: 0px;
-    }
 
-    p {
-        font-size: 16px !important;
-        line-height: 30px;
-        color: #4e4e4e !important;
-        margin: 0 auto;
-    }
+                <!-- side component -->
+                <div class="side-comp">
 
-    .grid {
-        gap: 30px;
-    }
+                    <div class="filter">
 
-    body {
-        overflow-y: scroll;
-        overflow-x: hidden;
-    }
+                        <!-- title -->
+                        <div class="filter-title">
+                            Refine Your Search
+                        </div>
 
-    section {
-        background: #fff;
-        margin: 0 auto;
-    }
+                        <div class="filter-criteria">
 
-    header {
-        margin: 0px;
-        padding: 0px !important;
-        height: 50px;
-        overflow: hidden;
-    }
+                            <h6>Year :</h6>
+                            <form id="year-input" action="">
 
-    main {
-        position: relative;
-        padding: 0px !important;
-        background-color: #fff;
-    }
+                            </form>
 
-    h1 {
-        font-size: 40px !important;
-        letter-spacing: 2px !important;
-        line-height: 100%;
-    }
 
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-weight: normal;
-        margin-bottom: 0px !important;
-    }
+                            <h6>Author :</h6>
+                            <form id="author-input" action="">
 
-    button {
-        margin: 40px auto;
-        margin-bottom: 30px;
-        max-width: 300px;
-        font-size: 20px;
-        border-radius: 0px;
-        border: none;
-        border-radius: 4px;
-        background: #f68b1f;
-        transition-duration: 0.3s;
-    }
+                            </form>
+                        </div>
 
-    button:hover {
-        background: #117cf7;
-    }
 
-    .container {
-        margin: 0px auto;
-        padding: 10px 10px;
-        max-width: 1200px !important;
-    }
 
-    .container-fluid {
-        padding: 0px !important;
-    }
 
-    #search-close {
-        width: 100px;
-        border-radius: 40px;
-        background-color: #F68B1F;
-        margin-top: 30px;
-        margin-right: 30px;
-    }
+                    </div>
 
-    .overlay-content {
-        overflow: hidden;
-    }
 
-    .overlay-content label {
-        display: inline-block;
-    }
+                </div>
 
-    .overlay-content h4 {
-        display: inline-block;
-        margin: 0px 20px;
-    }
 
-    .overlay-content div a {
-        display: inline-block;
-        text-decoration: underline;
-    }
+                <!-- main component -->
+                <div class="main-comp">
 
-    .overlay-content div h6 {
-        display: inline-block;
-    }
+                    <article class="generic-para ">
 
-    #search-bar {
-        width: 60%;
-        display: inline-block;
-    }
 
-    #search-button {
-        width: 300px;
-        display: inline-block;
-        border-radius: 30px;
-        margin-left: 20px;
-        background: #485680;
-    }
+                        <h3>Conference Papers</h3>
 
-    #search-modal {
-        overflow: hidden;
-    }
 
-    #search-button:hover {
-        background-color: #F68B1F;
-    }
+                        <div id="conference-paper">
 
-    #first-nav>ul>img {
-        transition-duration: 0.5s;
-    }
 
-    section#first-nav-section nav {
-        position: fixed;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 70px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
 
-    section#first-nav-section nav ul {
-        align-items: center;
-        z-index: 3;
-    }
+                        </div>
 
-    section#first-nav-section nav ul img {
-        height: 50px;
-        width: auto;
-        margin-right: 30px;
-        padding-left: 20px;
-    }
 
-    section#first-nav-section nav ul>li {
-        margin-right: 50px;
-    }
+                    </article>
 
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0px;
-    }
 
-    section#first-nav-section nav ul>li:last-child {
-        margin-right: 0;
-    }
+                </div>
 
-    section#first-nav-section nav ul>li>a {
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: 12px;
-    }
 
-    section#first-nav-section nav ul>li:after {
-        content: "";
-        display: block;
-        margin: auto;
-        height: 1px;
-        width: 0px;
-        background: transparent;
-        transition: width 0.3s ease, background-color 0.5s ease;
-    }
 
-    section#first-nav-section nav ul>li:hover:after {
-        width: 100%;
-        background: #fff;
-    }
+            </section>
 
-    section#first-nav-section .nav-resp {
-        height: 50px;
-        background-color: #160c0c;
-        border-bottom: 4px solid #F68B1F;
-        box-shadow: 0px 5px 12px -5px #2F4858;
-    }
+        </div>
 
-    section#first-nav-section .nav-resp ul img {
-        height: 30px !important;
-        padding-left: 20px;
-    }
 
-    section#first-nav-section .nav-resp #menu-bars {
-        padding-top: 2px;
-    }
+    </main>
+    <!-- #main -->
 
-    #menu-bars {
-        display: none;
-        padding-top: 2px;
-        color: #fff;
+<?php endwhile; // end of the loop.
+?>
+<style>
+    #archive-hero {
+        padding: 2rem 0;
+        background: #f3f0ec;
     }
 
-    section#second-nav-section nav {
-        position: fixed;
-        top: 70px;
-        text-align: center;
-        padding: 0px;
-        justify-content: space-evenly;
-        height: 50px;
-        z-index: 10;
-        transition: 0.5s ease-in-out;
-        background: #117cf7;
+    #archive-hero .content {
+        display: flex;
+        align-items: start;
     }
 
-    section#second-nav-section nav ul {
-        margin-top: 0px;
-        width: 100vw;
-        justify-content: space-evenly;
-        display: inline-flex;
+    #archive-hero .content .left-content {
+        padding: 1rem;
+        padding-left: 0 !important;
+        flex: 1;
     }
 
-    section#second-nav-section nav ul li>a {
-        margin: 0px;
-        color: #fff;
-        transition-duration: 0.3s;
-        font-size: 14px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        font-weight: normal;
-        font-size: 12px;
-        border-radius: 0px;
+    #archive-hero .content .left-content .main-title {
+        font-size: 2.2rem;
+        font-weight: 500;
+        color: #000000;
     }
 
-    section#second-nav-section nav ul li>a:hover {
-        border-radius: 0;
-        font-weight: bolder;
-        color: #eeffb0;
-        text-decoration: none !important;
+    #archive-hero .content .left-content .short-details {
+        margin-top: 1.5rem;
+        font-size: 1.1rem;
+        font-weight: 400;
     }
 
-    section#second-nav-section nav ul li:first-of-type>a:hover {
-        background: none;
+    #archive-hero .content .left-content .links {
+        margin-top: 2rem;
+        display: flex;
+        gap: 1.8rem;
     }
 
-    section#second-nav-section nav ul li>a>img {
-        height: 40px !important;
+    #archive-hero .content .left-content .links a {
+        height: 1.3rem;
     }
 
-    section#second-nav-section nav ul li>a>img:hover {
-        background-color: rgba(255, 255, 255, 0);
+    #archive-hero .content .left-content .links a:hover {
+        transform: scale(1.1);
+        opacity: 1 !important;
     }
 
-    section#second-nav-section .second-nav-active {
-        height: 40px;
-        top: 50px;
-        background-color: #117cf7;
+    #archive-hero .content .left-content .links a img {
+        height: 100%;
     }
 
-    section#second-nav-section .second-nav-active ul>li>a>img {
-        height: 30px !important;
+    #archive-hero .content .right-content {
+        padding: 0 0 1rem 2rem !important;
+        flex: 1;
+        align-self: end;
     }
 
-    #top-search {
-        width: 140px;
-        border-radius: 0;
-        height: 30px;
+    #archive-hero .content .right-content img {
+        width: 100%;
     }
 
-    @media (max-width: 1100px) {
-        #first-nav>ul {
-            position: relative;
-            width: 100%;
-            left: 0px;
-        }
-
-        #first-nav>ul>img {
-            width: 350px;
-            -o-object-fit: contain;
-            object-fit: contain;
-            margin-right: auto;
-        }
-
-        #first-nav>ul>li {
-            display: none;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: inline-block;
-            margin-right: auto;
-            width: 40px;
-        }
-
-        #top-search {
-            display: none;
-        }
-
-        #menu-bars {
-            display: inline-block;
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
+    #resarch-paper-container {
+        margin-top: 3rem;
+        display: flex;
+        gap: 1rem;
     }
 
-    @media (max-width: 576px) {
-        #menu-bars {
-            margin: 0px auto;
-            padding-top: 13px;
-            font-size: 45px;
-            color: #fff;
-        }
-
-        #first-nav>ul>img {
-            width: 170px;
-            margin-left: 10px !important;
-        }
-
-        #search>button.filled {
-            display: none;
-        }
-
-        body>main>section:nth-child(2)>div>h1 {
-            font-size: 60px;
-        }
-
-        #first-nav>ul>li:last-child {
-            display: none;
-        }
-
-        #cta {
-            display: flex;
+    @media (max-width: 1000px) {
+        #resarch-paper-container {
             flex-direction: column;
         }
-
-        #cta>button:nth-child(2) {
-            display: none;
-        }
-
-        #second-nav-section {
-            display: none !important;
-        }
     }
 
-    #slider-container {
-        padding: 0px !important;
+    #resarch-paper-container .main-comp {
+        flex: 7;
+        padding: 0 0.75rem 1rem 0;
     }
 
-    .yellow-line {
-        display: block;
-        width: 100px;
-        height: 4px;
-        background-color: #00ff00;
-        margin-left: 10px;
-        margin-top: 10px;
-        margin-bottom: 0px;
-    }
-
-    @media screen and (max-width: 800px) {
-        .yellow-line {
-            margin-left: calc(50vw - 50%) !important;
+    @media (max-width: 1000px) {
+        #resarch-paper-container .main-comp {
+            order: 0;
+            flex: 1;
         }
     }
 
-    footer {
-        position: relative;
-        z-index: 30 !important;
-    }
-
-    #footer1 {
-        z-index: 10;
-        height: 400px;
-        background: url("../img/footer2.png") no-repeat;
-        background-size: cover;
-        background-position: top;
+    #resarch-paper-container .main-comp article {
+        margin: unset;
     }
 
-    footer.container-fluid {
-        border-top: 10px solid #C85688;
-        overflow: hidden;
+    #resarch-paper-container .main-comp .generic-para {
         text-align: left;
-        margin: 0px;
-        padding: 0px !important;
-        background: #160c0c;
-        min-height: 350px;
-    }
-
-    footer.container-fluid h3 {
-        margin: 10px auto;
-        margin: 30px 0px;
-        font-family: "Open Sans", sans-serif;
-        font-size: 20px;
-        color: #fff;
-        font-weight: normal;
-        text-decoration: underline;
+        padding: 1rem 1.5rem !important;
     }
 
-    footer.container-fluid ul {
-        padding: 0px;
-    }
-
-    footer.container-fluid ul>li {
-        list-style: none;
-        margin: 0px;
-        padding: 0px;
-        line-height: 110%;
-    }
-
-    footer.container-fluid ul>li a {
-        text-decoration: none;
-        color: #fff;
-        font-size: 12px;
-        letter-spacing: 2px;
-        font-weight: normal;
-        font-family: "Open Sans", sans-serif;
-        text-transform: uppercase;
-    }
-
-    footer.container-fluid ul>li a:hover {
-        color: #F68B1F;
-        text-decoration: underline;
-    }
-
-    #fine-print {
+    #resarch-paper-container .main-comp .generic-para h2 {
         text-align: center;
-        margin: 10px auto;
-        height: 50px;
-        border-top: 1px solid #F68B1F;
-    }
-
-    #fine-print p {
-        font-size: 12px;
-        display: inline-flex;
-    }
-
-    #fine-print ul {
-        display: inline;
-    }
-
-    #fine-print ul>li {
-        display: inline;
-        padding: 10px;
-        font-size: 12px;
         letter-spacing: 1px;
     }
 
-    .banner-img-holder {
-        width: 100vw;
-        height: 400px;
-        margin-bottom: 60px !important;
-    }
-
-    .banner-overlay {
-        position: relative;
-        top: 0px;
-        bottom: 0px;
-        height: 400px;
-        width: 100vw;
-        background-color: rgba(50, 52, 63, 0.4588235294);
-        z-index: 1;
+    #resarch-paper-container .main-comp .generic-para h3 {
+        font-family: "DM Serif Text", serif;
+        margin: 20px 0px !important;
+        padding-bottom: 0.75rem;
+        text-align: left;
+        border-bottom: 3px solid #F68B1F;
     }
 
-    .banner-img {
-        position: relative;
-        top: -400px;
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
-        filter: greyscale(80%) !important;
-    }
-
-    .banner-title {
-        position: relative;
-        top: -800px;
-        height: 400px;
-        width: 100vw;
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+    #resarch-paper-container .main-comp .generic-para p {
+        text-align: justify;
+        margin: 30px 0px !important;
+        font-size: 16px !important;
+        line-height: 22px;
     }
 
-    .banner-title h1 {
-        margin-top: 50px !important;
-        font-family: "Open Sans", sans-serif;
-        font-weight: 800;
-        line-height: 140%;
-        color: #fff;
-        text-align: center;
+    #resarch-paper-container .main-comp .generic-para .prof-name {
+        color: #485680;
+        font-weight: 700;
+        font-size: 18px;
     }
 
-    #breadcrumb {
-        padding-top: 20px;
+    #resarch-paper-container .main-comp .generic-para .prof-deg {
+        font-style: italic;
+        font-weight: 400;
     }
 
-    #breadcrumb div {
-        margin-left: 20px !important;
+    #resarch-paper-container .main-comp .generic-para .prof-des {
+        font-size: 18px;
+        font-weight: 700;
     }
 
-    .crumbs {
-        font-size: 14px;
-        font-weight: 400;
-        margin: 30px 0px;
-        padding-bottom: 5px;
-        letter-spacing: 2px;
-        color: #333 !important;
-        border-bottom: 1px solid #333;
+    #resarch-paper-container .main-comp .generic-para .paper-details {
+        padding: 30px 0px;
+        border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
     }
 
-    .sidebar-links {
+    #resarch-paper-container .main-comp .generic-para .paper-title {
+        font-size: 18px !important;
+        text-align: left !important;
         margin: 10px 0px !important;
-        border-radius: 4px;
-        border: 1px solid rgba(51, 51, 51, 0.1921568627);
-    }
-
-    .sidebar-links h3 {
-        font-size: 30px !important;
-        font-family: "Open Sans", sans-serif !important;
-        width: 100%;
-        text-align: center !important;
-        text-transform: uppercase;
-        padding-bottom: 15px !important;
-        border-bottom: 1px solid #117cf7 !important;
+        font-weight: 400 !important;
+        text-decoration: underline;
     }
 
-    .sidebar-links ul li {
-        height: 30px !important;
-        padding: 5px 10px !important;
+    #resarch-paper-container .main-comp .generic-para .paper-year {
         font-size: 14px;
-        list-style: none;
-        border-bottom: 1px solid rgba(51, 51, 51, 0.231372549);
-    }
-
-    .sidebar-links ul li a:link,
-    .sidebar-links ul li a:visited {
-        color: #117cf7;
-    }
-
-    .sidebar-links ul li a:hover {
-        text-decoration: none;
-        color: #333;
-    }
-
-    .sidebar-links ul li.active a:link,
-    .sidebar-links ul li.active a:visited {
-        color: #865994;
-        font-weight: 600;
-    }
-
-    .generic-content-block {
-        padding: 40px 10px !important;
-    }
-
-    .generic-header {
-        width: 100%;
-        margin: 30px auto !important;
+        display: block;
+        color: rgba(51, 51, 51, 0.4509803922);
     }
 
-    .generic-header h1 {
-        font-weight: 600;
-        text-align: center;
-        text-transform: uppercase;
+    #resarch-paper-container .main-comp .generic-para p {
+        margin: 5px !important;
+        font-size: 14px !important;
     }
 
-    .personnel-img {
-        width: 300px;
-        height: 300px;
-        margin: 30px auto;
+    #resarch-paper-container .main-comp .generic-para .paper-contributors {
+        color: #222222 !important;
     }
 
-    .personnel-img img {
-        border-radius: 4px;
-        box-shadow: 4px 6px 18px 12px rgba(51, 51, 51, 0.1490196078);
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+    #resarch-paper-container .main-comp .generic-para .paper-tags {
+        margin: 20px 0px !important;
     }
 
-    .shadowed {
-        border-radius: 4px;
-        box-shadow: 4px 6px 18px 12px rgba(51, 51, 51, 0.1490196078);
+    #resarch-paper-container .main-comp .generic-para .paper-tags .tag {
+        font-size: 14px;
+        border: 1px solid #F68B1F;
+        padding: 3px 8px !important;
+        border-radius: 10px;
     }
 
-    .generic-para {
-        text-align: left;
-        padding: 20px !important;
+    #resarch-paper-container .side-comp {
+        flex: 2;
+        padding: 0 0.25rem 1rem 0 !important;
     }
 
-    .generic-para ol {
-        margin: 10px 30px !important;
+    @media (max-width: 1000px) {
+        #resarch-paper-container .side-comp {
+            order: 1;
+            flex: 1;
+        }
     }
 
-    .generic-para img {
-        border-radius: 4px;
-        height: 240px;
-        width: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+    #resarch-paper-container .side-comp .filter {
+        margin-bottom: 2rem;
+        padding: 0;
+        background-color: aliceblue;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
     }
 
-    .generic-para h2 {
+    #resarch-paper-container .side-comp .filter-title {
+        padding: 1rem 0;
         text-align: center;
-        letter-spacing: 1px;
-    }
-
-    .generic-para h3 {
-        font-family: "DM Serif Text", serif;
-        margin: 20px 0px !important;
-        text-align: left;
-        border-bottom: 3px solid #117cf7;
-    }
-
-    .generic-para p {
-        text-align: justify;
-        margin: 30px 0px !important;
-        font-size: 16px !important;
-        line-height: 22px;
+        background-color: #2c5d73;
+        border-bottom: 3px solid #ff860d;
+        color: #fff;
+        font-weight: 400;
+        font-size: 1rem;
     }
 
-    .prof-name {
-        color: #485680;
-        font-weight: 700;
-        font-size: 18px;
+    #resarch-paper-container .side-comp .filter-criteria {
+        padding: 1rem;
+        margin-bottom: 1.25rem;
     }
 
-    .prof-deg {
-        font-style: italic;
-        font-weight: 400;
+    #resarch-paper-container .side-comp .filter-criteria h6 {
+        font-weight: 500;
+        margin-bottom: 0.25rem !important;
     }
 
-    .prof-des {
-        font-size: 18px;
-        font-weight: 700;
+    #resarch-paper-container .side-comp .filter-criteria form {
+        padding: 0.25rem;
+        width: 100%;
+        padding-top: 0.25rem;
+        padding: 0.5rem;
     }
 
-    .area {
-        margin: 10px 0px;
-        border: 1px solid rgba(51, 51, 51, 0.3803921569);
-        border-radius: 8px;
-        height: 120px;
+    #resarch-paper-container .side-comp .filter-criteria form .input-group {
         width: 100%;
         display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .alignnone {
-        width: 150px !important;
-        height: auto !important;
-        margin: 20px auto !important;
-    }
-
-    #all-faculties h2,
-    #all-events h2,
-    #all-news h2 {
-        color: #000 !important;
-        margin-top: 40px;
-        margin-bottom: 20px;
-        font-weight: 800;
+        justify-content: space-between;
+        margin-bottom: 0.25rem;
     }
 
-    #all-faculties hr,
-    #all-events hr,
-    #all-news hr {
-        border: 1px solid rgba(51, 51, 51, 0.3882352941);
+    #resarch-paper-container .side-comp .filter-criteria form .input-group label {
+        font-size: 0.8rem;
+        font-weight: 500;
     }
 
-    #all-faculties .faculty-stub,
-    #all-events .faculty-stub,
-    #all-news .faculty-stub {
-        width: 100%;
-        padding: 5px;
-        box-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.137254902);
-        margin: 30px auto !important;
+    #resarch-paper-container .side-comp .filter-criteria form .input-group input {
+        font-size: 0.8rem;
     }
 
-    #all-faculties .stub-img-holder,
-    #all-events .stub-img-holder,
-    #all-news .stub-img-holder {
-        border-radius: 4px !important;
-        height: 160px;
-        overflow: hidden;
+    #resarch-paper-container .side-comp .filter-criteria form ul {
+        margin-bottom: unset;
     }
 
-    #all-faculties .stub-img-holder img,
-    #all-events .stub-img-holder img,
-    #all-news .stub-img-holder img {
-        border-radius: 0px !important;
-        height: 100%;
-        width: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+    #resarch-paper-container .side-comp .filter-criteria form ul li {
+        list-style: none;
     }
 
-    #all-faculties .archive-faculty-details,
-    #all-events .archive-faculty-details,
-    #all-news .archive-faculty-details {
-        height: 100px;
-        padding: 0px 10px;
+    #resarch-paper-container .side-comp .filter-criteria form a {
+        display: block;
+        color: #333;
+        font-size: 0.8rem;
+        font-weight: 500;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid #c5c5c5;
     }
 
-    #all-faculties .archive-faculty-details .faculty-degree,
-    #all-events .archive-faculty-details .faculty-degree,
-    #all-news .archive-faculty-details .faculty-degree {
-        display: inline-block;
-        color: rgba(89, 107, 161, 0.5647058824);
-        font-weight: 800;
-        font-size: 14px;
+    #resarch-paper-container .side-comp .filter-criteria form a:hover {
+        opacity: 1 !important;
+        color: #ff860d;
     }
 
-    #all-faculties .archive-faculty-details .faculty-designation,
-    #all-events .archive-faculty-details .faculty-designation,
-    #all-news .archive-faculty-details .faculty-designation {
+    #resarch-paper-container .side-comp .filter-criteria form .single-item {
         display: block;
-        color: rgba(0, 0, 0, 0.5647058824);
-        font-weight: 800;
-        font-size: 14px;
+        margin-bottom: 0.75rem;
+        padding-bottom: 2rem;
+        border-bottom: 1px solid #2c5d73;
+        transition: all 0.25s ease-in-out;
     }
 
-    #all-faculties .archive-faculty-details h3,
-    #all-events .archive-faculty-details h3,
-    #all-news .archive-faculty-details h3 {
-        font-size: 18px;
-        line-height: 22px;
-        font-family: "Open Sans", sans-serif;
-        color: #2F4858 !important;
-        margin: 10px auto;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item:last-child {
+        border-bottom: none;
+        margin-bottom: 0rem;
+        padding-bottom: 0.25rem;
     }
 
-    .faculty-grp-img {
-        height: auto !important;
-        width: 100% !important;
-        margin: 0px auto !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date {
+        font-size: 0.8rem;
+        font-weight: 500;
+        color: #c66f17;
     }
 
-    .paper-details {
-        padding: 30px 0px;
-        border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .single-item-title {
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: #2c5d73;
     }
 
-    .paper-details .paper-title {
-        font-size: 18px !important;
-        text-align: left !important;
-        margin: 10px 0px !important;
-        text-decoration: underline;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container {
+        display: flex;
+        align-items: center;
+        gap: 0.7rem;
     }
 
-    .paper-details .paper-year {
-        font-size: 14px;
-        display: block;
-        color: rgba(51, 51, 51, 0.4509803922);
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .date {
+        font-size: 0.75rem;
     }
 
-    .paper-details p {
-        margin: 5px !important;
-        font-size: 14px !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon {
+        width: 0.75rem;
+        color: #ffffff;
     }
 
-    .paper-details .paper-contributors {
-        color: #222222 !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon img {
+        width: 100%;
     }
 
-    .paper-details .paper-tags {
-        margin: 20px 0px !important;
+    /*# sourceMappingURL=cse-journal-paper.css.map */
+</style>
+<script>
+    const payload = {
+        "user_login_id": "api_user",
+        "auth_token": "api_user20230419045143"
+    }
+
+    const fetchJournalPaper = async () => {
+
+        try {
+            const res = await fetch("https://ucamapi.uiu.ac.bd/api/EmployeeJournal", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            return data
+        } catch (error) {
+            console.log(`Error: ${error}`)
+        }
     }
 
-    .paper-details .paper-tags .tag {
-        font-size: 14px;
-        border: 1px solid rgba(17, 124, 247, 0.431372549);
-        padding: 3px 8px !important;
-        border-radius: 10px;
+    fetchJournalPaper()
+        .then(data => {
+            // adding menu data into html
+            addDataToPage(data)
+        })
+
+    function addDataToPage(data) {
+        const conferencePaper = document.getElementById('conference-paper');
+        const authorFilterContainer = document.getElementById('author-input');
+        const yearFilterContainer = document.getElementById('year-input');
+
+        if (data) {
+
+            let allYears = [];
+            data.map(data => {
+                const publishYear = data.Year;
+                allYears.push(publishYear);
+                // year add in filter
+                const allYear = `<div class="input-group">
+                                        <span>
+                                          <label for=${publishYear}>${publishYear}</label>
+                                        </span>
+                                        <span>
+                                          <input type="radio" id=${publishYear} name="author" value=${publishYear}>
+                                        </span>
+                                    </div>`
+
+                yearFilterContainer.insertAdjacentHTML("beforeend", allYear)
+                // year add in filter end
+
+                // author add in filter
+                const allAuthor = `<div class="input-group">
+                                        <span>
+                                          <label for=${data.TeacherCode}>${data.TeacherCode}</label>
+                                        </span>
+                                        <span>
+                                          <input type="radio" id=${data.TeacherCode} name="author" value=${data.TeacherCode}>
+                                        </span>
+                                    </div>`
+
+                authorFilterContainer.insertAdjacentHTML("beforeend", allAuthor)
+                // author add in filter end
+
+                // journallist adding
+                data.JournalList.map(journal => {
+                    const journalData = `<div class="paper-details">
+                                            <span class="paper-year">${publishYear}</span>
+                                            <h2 class="paper-title">${journal.PaperTitle}</h2>
+                                            <p class="paper-tags">
+                                                ${
+                                                    journal.KeyWords.map(KeyWord => {
+                                                        return `<span class="tag">${KeyWord}</span>`
+                                                    })
+                                                }
+                                            </p>
+                                            <p class="paper-event">
+                                                <i>Publication: </i> ${journal.JournalTitle}
+                                            </p>
+                                            <p class="paper-contributors">
+                                                <i>Authors: </i> ${
+                                                    journal.Author.map(author => {
+                                                        return "  " + author.AuthorName
+                                                    })
+                                                }
+                                            </p>
+                                        </div>`
+                    conferencePaper.insertAdjacentHTML("beforeend", journalData)
+                })
+            })
+            console.log(allYears)
+        }
     }
-
-    /*# sourceMappingURL=journal-cse.css.map */
-</style>
+</script>
 <?php get_footer(); ?>

+ 4 - 4
single-faculty.php

@@ -182,8 +182,8 @@ get_header(); ?>
 										echo "<h2 class='paper-title'>{$journal['PaperTitle']}</h2>";
 										echo "</a>";
 										echo "<p class='paper-tags'>";
-										$journalKeyword = explode(',', $journal['Keyword']);
-										foreach ($journalKeyword as $keyword) {
+										// $journalKeyword = $journal['KeyWords'];
+										foreach ($journal['KeyWords'] as $keyword) {
 											if ($keyword) {
 												echo "<span class='tag'>{$keyword}</span>";
 											}
@@ -224,8 +224,8 @@ get_header(); ?>
 										echo "<h2 class='paper-title'>{$conference['PaperTitle']}</h2>";
 										echo "</a>";
 										echo "<p class='paper-tags'>";
-										$conferenceKeyword = explode(',', $conference['Keyword']);
-										foreach ($conferenceKeyword as $keyword) {
+										// $conferenceKeyword = $conference['KeyWords'];
+										foreach ($conference['KeyWords'] as $keyword) {
 											if ($keyword) {
 												echo "<span class='tag'>{$keyword}</span>";
 											}

Some files were not shown because too many files changed in this diff