{"id":14357,"date":"2020-05-18T20:25:21","date_gmt":"2020-05-18T19:25:21","guid":{"rendered":"https:\/\/www.univ-djelfa.dz\/ar\/?page_id=14357"},"modified":"2026-04-30T20:08:42","modified_gmt":"2026-04-30T19:08:42","slug":"directory","status":"publish","type":"page","link":"https:\/\/www.univ-djelfa.dz\/?page_id=14357","title":{"rendered":"Directory"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14357\" class=\"elementor elementor-14357\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c038a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"9c038a3\" data-element_type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f22d3c9 exad-sticky-section-no\" data-id=\"f22d3c9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4f8e411 exad-sticky-section-no elementor-widget elementor-widget-html\" data-id=\"4f8e411\" data-element_type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<div id=\"university-directory\" class=\"dir-app-wrapper\">\n    <header class=\"dir-header\">\n        <div class=\"header-icon-box\">\n            <i class=\"fas fa-university\"><\/i>\n        <\/div>\n        <h1>University Directory<\/h1>\n        <p>Instant access to University and staff contact information<\/p>\n    <\/header>\n\n    <section class=\"search-section\">\n        <div class=\"search-panel\">\n            <div class=\"search-input-group\">\n                <i class=\"fas fa-search search-icon-lead\"><\/i>\n                <input \n                    type=\"text\" \n                    id=\"searchInput\" \n                    placeholder=\"Search by name  \" \n                    autocomplete=\"off\"\n                    aria-label=\"Search directory\">\n                <div id=\"suggestions\" class=\"autocomplete-panel\"><\/div>\n            <\/div>\n            <div class=\"action-buttons\">\n                <button id=\"searchBtn\" class=\"btn-main btn-primary\">\n                    <span>Search<\/span>\n                <\/button>\n                <button id=\"clearBtn\" class=\"btn-main btn-reset\" title=\"Clear Search\">\n                    <i class=\"fas fa-undo-alt\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n        <div id=\"statusInfo\" class=\"results-metadata\"><\/div>\n    <\/section>\n\n    <div id=\"loading\" class=\"modern-loader-container\">\n        <div class=\"loader-spinner\"><\/div>\n        <p>Fetching directory data...<\/p>\n    <\/div>\n\n    <main id=\"results\" class=\"directory-grid\"><\/main>\n\n    <nav id=\"pagination\" class=\"pagination-container\"><\/nav>\n<\/div>\n\n<style>\n:root {\n    --brand: #ac0b30;\n    --brand-dark: #820623;\n    --navy: #002d5a;\n    --slate-800: #1e293b;\n    --slate-500: #64748b;\n    --slate-100: #f1f5f9;\n    --white: #ffffff;\n    --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n    --radius-lg: 16px;\n}\n\n.dir-app-wrapper {\n    max-width: 1140px;\n    margin: 40px auto;\n    padding: 0 20px;\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    color: var(--slate-800);\n}\n\n\/* Header *\/\n.dir-header { text-align: center; margin-bottom: 40px; }\n.header-icon-box { \n    background: var(--brand); color: white; width: 64px; height: 64px; \n    border-radius: 18px; display: flex; align-items: center; justify-content: center;\n    margin: 0 auto 16px; font-size: 1.6rem; box-shadow: 0 10px 15px -3px rgba(172, 11, 48, 0.3);\n}\n.dir-header h1 { font-size: 2.2rem; font-weight: 800; color: var(--navy); margin: 0; letter-spacing: -0.02em; }\n.dir-header p { color: var(--slate-500); margin-top: 8px; font-size: 1.05rem; }\n\n\/* Search Panel *\/\n.search-panel {\n    background: var(--white); padding: 10px; border-radius: var(--radius-lg);\n    display: flex; gap: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--slate-100);\n    position: relative;\n}\n.search-input-group { position: relative; flex: 1; }\n.search-icon-lead { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--brand); z-index: 2; }\n\n#searchInput {\n    width: 100%; padding: 16px 16px 16px 52px; border: none; border-radius: 12px;\n    font-size: 1rem; background: #f8fafc; transition: all 0.2s;\n}\n#searchInput:focus { background: var(--white); outline: 2px solid var(--brand); box-shadow: 0 0 0 4px rgba(172, 11, 48, 0.1); }\n\n.action-buttons { display: flex; gap: 8px; }\n.btn-main { border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; }\n.btn-primary { background: var(--brand); color: white; padding: 0 32px; }\n.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }\n.btn-reset { background: var(--slate-100); color: var(--slate-500); width: 52px; }\n.btn-reset:hover { background: #e2e8f0; color: var(--navy); }\n\n\/* Suggestions *\/\n.autocomplete-panel {\n    position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: white;\n    border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 100; display: none;\n    border: 1px solid var(--slate-100); overflow: hidden;\n}\n.autocomplete-panel div { padding: 14px 20px; cursor: pointer; border-bottom: 1px solid #f8fafc; font-size: 0.95rem; }\n.autocomplete-panel div:hover { background: #fff1f2; color: var(--brand); font-weight: 600; }\n\n.results-metadata { margin-top: 14px; font-size: 0.9rem; color: var(--slate-500); padding-left: 4px; }\n\n\/* Grid & Cards *\/\n.directory-grid {\n    display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    margin-top: 30px;\n}\n.card {\n    background: var(--white); border-radius: var(--radius-lg); padding: 28px;\n    border: 1px solid var(--slate-100); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    display: flex; flex-direction: column; position: relative;\n    animation: slideUp 0.4s ease-out forwards;\n}\n.card:hover { transform: translateY(-6px); border-color: var(--brand); box-shadow: var(--shadow-lg); }\n\n.card h3 { color: var(--navy); font-size: 1.25rem; font-weight: 700; margin: 0 0 18px; line-height: 1.3; }\n\n.detail-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }\n.detail-row i { color: var(--brand); font-size: 1rem; margin-top: 3px; width: 20px; text-align: center; }\n.detail-row .label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); font-weight: 700; margin-bottom: 2px; }\n.detail-row .value { font-size: 0.95rem; font-weight: 500; }\n\n.email-copy-box { \n    background: #f8fafc; border: 1px dashed #cbd5e1; padding: 12px; \n    border-radius: 10px; cursor: pointer; margin-top: 6px; transition: 0.2s;\n}\n.email-copy-box:hover { border-color: var(--brand); background: #fff1f2; }\n\n\/* Pagination *\/\n.pagination-container { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }\n.page-node {\n    width: 42px; height: 42px; border: 1px solid var(--slate-100); background: white;\n    border-radius: 10px; cursor: pointer; font-weight: 700; transition: 0.2s;\n}\n.page-node.active { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 4px 10px rgba(172, 11, 48, 0.2); }\n\n\/* Animations *\/\n@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes spin { 100% { transform: rotate(360deg); } }\n\n.modern-loader-container { display: none; text-align: center; margin: 60px 0; grid-column: 1\/-1; }\n.loader-spinner { width: 44px; height: 44px; border: 4px solid var(--slate-100); border-top: 4px solid var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }\n\n@media (max-width: 650px) {\n    .search-panel { flex-direction: column; }\n    .btn-primary { height: 52px; width: 100%; }\n}\n<\/style>\n\n<script>\n\/**\n * University Directory Application\n *\/\nconst DirectoryApp = {\n    allEntries: [],\n    searchResults: [],\n    page: 1,\n    limit: 9,\n\n    init() {\n        this.cache();\n        this.bind();\n        this.load();\n    },\n\n    cache() {\n        this.input = document.getElementById('searchInput');\n        this.grid = document.getElementById('results');\n        this.pageBox = document.getElementById('pagination');\n        this.loader = document.getElementById('loading');\n        this.status = document.getElementById('statusInfo');\n        this.suggestBox = document.getElementById('suggestions');\n    },\n\n    bind() {\n        \/\/ Search execution\n        document.getElementById('searchBtn').addEventListener('click', () => this.executeSearch());\n        document.getElementById('clearBtn').addEventListener('click', () => this.resetApp());\n        this.input.addEventListener('keypress', (e) => e.key === 'Enter' && this.executeSearch());\n\n        \/\/ Live Suggestions\n        let timer;\n        this.input.addEventListener('input', (e) => {\n            clearTimeout(timer);\n            timer = setTimeout(() => this.showSuggestions(e.target.value.trim()), 300);\n        });\n\n        \/\/ Close UI elements\n        document.addEventListener('click', (e) => {\n            if (!e.target.closest('.search-input-group')) this.suggestBox.style.display = 'none';\n        });\n    },\n\n    async load() {\n        try {\n            const res = await fetch('\/wp-content\/uploads\/directoryen.csv');\n            const csv = await res.text();\n            this.parse(csv);\n        } catch (err) {\n            this.grid.innerHTML = `<p style=\"text-align:center; color:red; grid-column:1\/-1;\">System Error: Failed to load directory data.<\/p>`;\n        }\n    },\n\n    parse(text) {\n        const lines = text.trim().split('\\n');\n        const heads = lines[0].split(',').map(h => h.trim());\n        \n        this.allEntries = lines.slice(1).map(line => {\n            const cells = line.split(\/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)\/);\n            const row = {};\n            heads.forEach((h, i) => {\n                row[h] = cells[i] ? cells[i].replace(\/\"\/g, '').trim() : '';\n            });\n            return row;\n        });\n    },\n\n    showSuggestions(query) {\n        if (query.length < 2) { this.suggestBox.style.display = 'none'; return; }\n        \n        const hits = this.allEntries.filter(e => \n            e['Name'] && e['Name'].toLowerCase().includes(query.toLowerCase())\n        ).slice(0, 5);\n\n        if (hits.length > 0) {\n            this.suggestBox.innerHTML = hits.map(h => `<div>${h['Name']}<\/div>`).join('');\n            this.suggestBox.style.display = 'block';\n            \n            this.suggestBox.querySelectorAll('div').forEach(div => {\n                div.onclick = () => {\n                    this.input.value = div.innerText;\n                    this.suggestBox.style.display = 'none';\n                    this.executeSearch();\n                };\n            });\n        } else {\n            this.suggestBox.style.display = 'none';\n        }\n    },\n\n    executeSearch() {\n        const query = this.input.value.toLowerCase().trim();\n        if (!query) return;\n\n        this.suggestBox.style.display = 'none';\n        this.loader.style.display = 'block';\n        this.grid.innerHTML = '';\n\n        setTimeout(() => {\n            this.searchResults = this.allEntries.filter(entry => \n                Object.values(entry).some(val => val.toLowerCase().includes(query))\n            );\n\n            this.loader.style.display = 'none';\n            this.page = 1;\n            this.render();\n            this.status.innerHTML = `Found <strong>${this.searchResults.length}<\/strong> matching contacts.`;\n        }, 350);\n    },\n\n    render() {\n        const start = (this.page - 1) * this.limit;\n        const slice = this.searchResults.slice(start, start + this.limit);\n\n        if (slice.length === 0) {\n            this.grid.innerHTML = `\n                <div style=\"grid-column: 1\/-1; text-align: center; padding: 60px; color: var(--slate-500);\">\n                    <i class=\"fas fa-search-minus\" style=\"font-size: 3.5rem; opacity: 0.2; margin-bottom: 20px;\"><\/i>\n                    <p>No results found. Please try a different keyword.<\/p>\n                <\/div>`;\n            this.pageBox.innerHTML = '';\n            return;\n        }\n\n        this.grid.innerHTML = slice.map(item => `\n            <article class=\"card\">\n                <h3>${item['Name'] || 'Staff Member'}<\/h3>\n                \n                <div class=\"detail-row\">\n                    <i class=\"fas fa-id-badge\"><\/i>\n                    <div><span class=\"label\">Position<\/span><span class=\"value\">${item['Position'] || 'Faculty'}<\/span><\/div>\n                <\/div>\n\n                <div class=\"detail-row\">\n                    <i class=\"fas fa-sitemap\"><\/i>\n                    <div><span class=\"label\">Department<\/span><span class=\"value\">${item['Structure'] || 'Academic Affairs'}<\/span><\/div>\n                <\/div>\n\n                <div class=\"email-copy-box\" onclick=\"DirectoryApp.copyText('${item['Email']}', this)\">\n                    <span class=\"label\">Official Email (Click to copy)<\/span>\n                    <div class=\"detail-row\" style=\"margin-bottom:0;\">\n                        <i class=\"fas fa-envelope\"><\/i>\n                        <span class=\"value\" style=\"color:var(--brand); font-weight:700;\">${item['Email'] || '-'}<\/span>\n                    <\/div>\n                <\/div>\n            <\/article>\n        `).join('');\n\n        this.drawPagination();\n    },\n\n    drawPagination() {\n        const total = Math.ceil(this.searchResults.length \/ this.limit);\n        if (total <= 1) { this.pageBox.innerHTML = ''; return; }\n\n        let html = '';\n        for (let i = 1; i <= total; i++) {\n            if (i === 1 || i === total || (i >= this.page - 1 && i <= this.page + 1)) {\n                html += `<button class=\"page-node ${i === this.page ? 'active' : ''}\" onclick=\"DirectoryApp.setPage(${i})\">${i}<\/button>`;\n            } else if (i === this.page - 2 || i === this.page + 2) {\n                html += `<span style=\"padding: 10px;\">...<\/span>`;\n            }\n        }\n        this.pageBox.innerHTML = html;\n    },\n\n    setPage(n) {\n        this.page = n;\n        this.render();\n        window.scrollTo({ top: this.input.offsetTop - 120, behavior: 'smooth' });\n    },\n\n    copyText(text, el) {\n        if (!text || text === '-') return;\n        navigator.clipboard.writeText(text).then(() => {\n            const original = el.innerHTML;\n            el.innerHTML = `<span style=\"color: #059669; font-size: 0.85rem; font-weight:800;\"><i class=\"fas fa-check-circle\"><\/i> Successfully Copied!<\/span>`;\n            setTimeout(() => el.innerHTML = original, 1800);\n        });\n    },\n\n    resetApp() {\n        this.input.value = '';\n        this.grid.innerHTML = '';\n        this.pageBox.innerHTML = '';\n        this.status.innerHTML = '';\n        this.searchResults = [];\n        this.suggestBox.style.display = 'none';\n        this.input.focus();\n    }\n};\n\n\/\/ Launch Application\ndocument.addEventListener('DOMContentLoaded', () => DirectoryApp.init());\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>University Directory Instant access to University and staff contact information Search Fetching directory data&#8230;<\/p>\n","protected":false},"author":2,"featured_media":14085,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-14357","page","type-page","status-publish","has-post-thumbnail","hentry"],"lang":"en","translations":{"en":14357,"ar":126,"fr":29597},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/pages\/14357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14357"}],"version-history":[{"count":33,"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/pages\/14357\/revisions"}],"predecessor-version":[{"id":34340,"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/pages\/14357\/revisions\/34340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=\/wp\/v2\/media\/14085"}],"wp:attachment":[{"href":"https:\/\/www.univ-djelfa.dz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}