{"id":180677,"date":"2026-02-06T18:50:03","date_gmt":"2026-02-06T17:50:03","guid":{"rendered":"https:\/\/megatraining.africa\/?page_id=180677"},"modified":"2026-02-06T18:58:25","modified_gmt":"2026-02-06T17:58:25","slug":"wikitechnology","status":"publish","type":"page","link":"https:\/\/megatraining.africa\/en\/wikitechnology\/","title":{"rendered":"Wikitechnology"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"180677\" class=\"elementor elementor-180677\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5b5e24a elementor-section-height-min-height elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"5b5e24a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-custom\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-43ea7eb\" data-id=\"43ea7eb\" data-element_type=\"column\" data-e-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-25a1ca8 elementor-widget elementor-widget-thim-ekits-breadcrumb\" data-id=\"25a1ca8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"thim-ekits-breadcrumb.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t\t<div class=\"thim-ekit-breadcrumb\">\n\n\t\t\t\tHome\n\t\t\t<\/div>\n\n\t\t\t\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<div class=\"elementor-element elementor-element-41f6b0b e-flex e-con-boxed e-con e-parent\" data-id=\"41f6b0b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4637b7 elementor-widget elementor-widget-html\" data-id=\"e4637b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- MegaTraining Professional Industry Wiki - All English & Fixed UI -->\r\n<section id=\"wiki-app\" class=\"enterprise-wiki\">\r\n<style>\r\n\/* -------------------------------------------\r\n   1. Design System (Enterprise Standards)\r\n------------------------------------------- *\/\r\n:root {\r\n    --brand-dark: #0F172A;      \/* Deep Slate - Corporate *\/\r\n    --brand-blue: #DC2626;      \/* CHANGED: Corporate Red *\/\r\n    --brand-bg: #F8FAFC;        \/* Light Surface *\/\r\n    --text-main: #1E293B;\r\n    --text-muted: #64748B;\r\n    --border-color: #E2E8F0;\r\n    --radius-lg: 16px;\r\n    --radius-md: 12px;\r\n}\r\n\r\n.enterprise-wiki {\r\n    font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n    background: var(--brand-bg);\r\n    color: var(--brand-dark);\r\n    padding: 60px 20px;\r\n    line-height: 1.6;\r\n    -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.wiki-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* -------------------------------------------\r\n   2. Header & Search\r\n------------------------------------------- *\/\r\n.wiki-header { text-align: center; max-width: 800px; margin: 0 auto 60px; }\r\n\r\n.header-title {\r\n    font-size: 3.5rem; font-weight: 800; color: var(--brand-dark);\r\n    margin: 0 0 15px; letter-spacing: -1.5px; line-height: 1.1;\r\n}\r\n.header-title span { color: var(--brand-blue); }\r\n\r\n.search-container { position: relative; max-width: 600px; margin: 0 auto 30px; }\r\n.search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #94A3B8; z-index: 2; }\r\n\r\n.search-input {\r\n    width: 100%; padding: 20px 25px 20px 55px;\r\n    font-size: 1rem; border: 1px solid var(--border-color);\r\n    border-radius: 50px; background: #fff;\r\n    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);\r\n    transition: all 0.3s ease;\r\n}\r\n\/* CHANGED: Focus ring color to Red RGBA *\/\r\n.search-input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }\r\n\r\n\/* Sector Filters *\/\r\n.filters-nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }\r\n.filter-chip {\r\n    background: #fff; border: 1px solid var(--border-color);\r\n    color: var(--text-muted); padding: 10px 22px; border-radius: 50px;\r\n    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.3s;\r\n}\r\n.filter-chip.active, .filter-chip:hover {\r\n    background: var(--brand-dark); color: #fff; border-color: var(--brand-dark);\r\n}\r\n\r\n\/* -------------------------------------------\r\n   3. Grid & Definition Cards\r\n------------------------------------------- *\/\r\n.wiki-grid {\r\n    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px;\r\n}\r\n\r\n.card {\r\n    background: #fff; border: 1px solid var(--border-color);\r\n    border-radius: var(--radius-md); padding: 30px; cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    display: flex; flex-direction: column; height: 100%;\r\n}\r\n\/* CHANGED: Hover border color to Light Red *\/\r\n.card:hover { transform: translateY(-6px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-color: #FECACA; }\r\n\r\n.industry-badge {\r\n    \/* CHANGED: Background to Light Red *\/\r\n    background: #FEF2F2; color: var(--brand-blue); align-self: flex-start;\r\n    font-size: 0.7rem; font-weight: 800; padding: 6px 12px; border-radius: 6px; text-transform: uppercase; margin-bottom: 15px;\r\n}\r\n.card h3 { font-size: 1.4rem; margin: 0 0 12px; color: var(--brand-dark); font-weight: 700; }\r\n.card-preview { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 25px; flex-grow: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }\r\n.card-footer { border-top: 1px solid var(--brand-bg); pt: 20px; color: var(--brand-blue); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }\r\n\r\n\/* -------------------------------------------\r\n   4. Modal & FIXED Close Button (X)\r\n------------------------------------------- *\/\r\n.modal-overlay {\r\n    position: fixed; inset: 0; z-index: 9999;\r\n    background: rgba(15, 23, 42, 0.7);\r\n    backdrop-filter: blur(8px);\r\n    display: flex; align-items: center; justify-content: center;\r\n    padding: 20px; opacity: 0; visibility: hidden; transition: 0.3s ease;\r\n}\r\n.modal-overlay.open { opacity: 1; visibility: visible; }\r\n\r\n.modal-container {\r\n    background: #ffffff; width: 100%; max-width: 800px;\r\n    border-radius: var(--radius-lg);\r\n    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);\r\n    display: flex; flex-direction: column; max-height: 85vh;\r\n    transform: scale(0.95); opacity: 0; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n    position: relative; overflow: hidden;\r\n}\r\n.modal-overlay.open .modal-container { transform: scale(1); opacity: 1; }\r\n\r\n\/* --- THE FIXED \"X\" BUTTON --- *\/\r\n.btn-close {\r\n    position: absolute;\r\n    top: 24px;\r\n    right: 24px;\r\n    width: 44px;\r\n    height: 44px;\r\n    background: #F1F5F9;\r\n    border: 1px solid #E2E8F0;\r\n    border-radius: 50%;\r\n    color: #64748B;\r\n    display: flex; \r\n    align-items: center; \r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    z-index: 100;\r\n    padding: 0;\r\n}\r\n\r\n\/* Visibility fix: Explicit stroke and stroke-width *\/\r\n.btn-close svg {\r\n    width: 24px;\r\n    height: 24px;\r\n    stroke: currentColor; \/* Inherits from 'color' property *\/\r\n    stroke-width: 3;      \/* Makes the X bold and visible *\/\r\n    display: block;\r\n}\r\n\r\n.btn-close:hover {\r\n    background: var(--brand-dark);\r\n    color: #ffffff;\r\n    border-color: var(--brand-dark);\r\n    transform: rotate(90deg);\r\n}\r\n\r\n\/* Modal Content Styling *\/\r\n.modal-header { padding: 40px 40px 20px; border-bottom: 1px solid var(--border-color); }\r\n.modal-content { padding: 40px; overflow-y: auto; }\r\n.content-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #94A3B8; margin-bottom: 10px; letter-spacing: 1px; }\r\n.definition-body { font-size: 1.15rem; color: #334155; margin-bottom: 30px; line-height: 1.8; }\r\n.definition-body strong { color: var(--brand-blue); }\r\n.example-box { background: #F8FAFC; border-left: 4px solid var(--brand-blue); padding: 25px; border-radius: 0 8px 8px 0; margin-bottom: 30px; font-size: 1rem; color: #475569; }\r\n\/* CHANGED: Pill background to Light Red *\/\r\n.tag-pill { background: #FEF2F2; color: var(--brand-blue); padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; display: inline-block; margin-right: 8px; margin-bottom: 8px; }\r\n.source-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid #F1F5F9; font-size: 0.85rem; color: #94A3B8; font-style: italic; }\r\n\r\n@media(max-width: 768px) {\r\n    .header-title { font-size: 2.5rem; }\r\n    .filters-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 15px; }\r\n    .modal-container { max-height: 95vh; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"wiki-container\">\r\n    <!-- Header -->\r\n    <div class=\"wiki-header\">\r\n        <!-- CHANGED TITLE TO WIKITECHNOLOGY -->\r\n        <h1 class=\"header-title\">Wiki<span>technology<\/span><\/h1>\r\n        <div class=\"search-container\">\r\n            <svg class=\"search-icon\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path><\/svg>\r\n            <input type=\"text\" class=\"search-input\" id=\"wikiSearch\" placeholder=\"Search industrial terminology...\">\r\n        <\/div>\r\n        <div class=\"filters-nav\" id=\"filtersContainer\">\r\n            <button class=\"filter-chip active\" data-filter=\"all\">All Sectors<\/button>\r\n            <!-- Dynamic Sectors Filtered Here -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Grid of Definitions -->\r\n    <div class=\"wiki-grid\" id=\"wikiGrid\">\r\n        <!-- JS generates cards here -->\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Modal Dialog -->\r\n<div class=\"modal-overlay\" id=\"infoModal\">\r\n    <div class=\"modal-container\">\r\n        <!-- Close Button (X) -->\r\n        <button class=\"btn-close\" onclick=\"closeModal()\" aria-label=\"Close Dialog\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n            <\/svg>\r\n        <\/button>\r\n\r\n        <div class=\"modal-header\">\r\n            <h2 id=\"mTitle\" style=\"margin:0; font-size:2rem; color:var(--brand-dark);\">Title<\/h2>\r\n            <span id=\"mInd\" style=\"color:var(--brand-blue); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; margin-top:8px; display:block;\">Sector<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"modal-content\">\r\n            <div class=\"content-label\">Detailed Definition<\/div>\r\n            <div class=\"definition-body\" id=\"mDef\"><\/div>\r\n            \r\n            <div id=\"mExampleBlock\" style=\"display:none;\">\r\n                <div class=\"content-label\">Practical Application<\/div>\r\n                <div class=\"example-box\" id=\"mEx\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"content-label\">Reference Tags<\/div>\r\n            <div class=\"tags-container\" id=\"mTags\"><\/div>\r\n            \r\n            <div class=\"source-footer\" id=\"mSource\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ --- CORE CONFIGURATION ---\r\nconst DATA_URL = 'https:\/\/megatraining.africa\/wp-content\/uploads\/2026\/02\/industry_data.json';\r\nlet db = [];\r\n\r\n\/\/ --- INITIALIZATION ---\r\ndocument.addEventListener('DOMContentLoaded', () => { \r\n    loadData(); \r\n    setupSearch(); \r\n});\r\n\r\n\/\/ --- DATA FETCHING ---\r\nasync function loadData() {\r\n    const grid = document.getElementById('wikiGrid');\r\n    try {\r\n        const res = await fetch(DATA_URL);\r\n        if(!res.ok) throw new Error(\"Fetch failed\");\r\n        db = await res.json();\r\n        renderCards(db);\r\n        createFilters(db);\r\n    } catch(e) {\r\n        console.error(e);\r\n        grid.innerHTML = `<div style=\"text-align:center; padding:50px; color:#ef4444; font-weight:600;\">Unable to connect to the knowledge database. Please check back later.<\/div>`;\r\n    }\r\n}\r\n\r\n\/\/ Formatting Helper (Bold **text** and Sprints \\n)\r\nfunction formatText(t) { \r\n    if(!t) return \"\"; \r\n    return t.replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>').replace(\/\\n\/g, '<br>'); \r\n}\r\n\r\n\/\/ --- RENDER CARDS ---\r\nfunction renderCards(data) {\r\n    const grid = document.getElementById('wikiGrid');\r\n    grid.innerHTML = '';\r\n    \r\n    if(data.length === 0) {\r\n        grid.innerHTML = `<div style=\"grid-column:1\/-1; text-align:center; padding:40px; color:#94A3B8;\">No matches found for your search.<\/div>`;\r\n        return;\r\n    }\r\n\r\n    data.forEach(item => {\r\n        const div = document.createElement('div');\r\n        div.className = 'card';\r\n        div.onclick = () => showModal(item);\r\n        div.innerHTML = `\r\n            <div class=\"industry-badge\">${item.industry_code || 'General'}<\/div>\r\n            <h3>${item.title}<\/h3>\r\n            <p class=\"card-preview\">${item.preview || item.full_definition}<\/p>\r\n            <div class=\"card-footer\">\r\n                Full Details \r\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\/><\/svg>\r\n            <\/div>\r\n        `;\r\n        grid.appendChild(div);\r\n    });\r\n}\r\n\r\n\/\/ --- MODAL SYSTEM ---\r\nfunction showModal(item) {\r\n    document.getElementById('mTitle').innerText = item.title;\r\n    document.getElementById('mInd').innerText = item.industry_text || item.industry_code;\r\n    document.getElementById('mDef').innerHTML = formatText(item.full_definition);\r\n    \r\n    const ex = document.getElementById('mExampleBlock');\r\n    if(item.example) {\r\n        document.getElementById('mEx').innerHTML = formatText(item.example);\r\n        ex.style.display = 'block';\r\n    } else { \r\n        ex.style.display = 'none'; \r\n    }\r\n    \r\n    const tags = document.getElementById('mTags');\r\n    tags.innerHTML = '';\r\n    (item.tags || []).forEach(t => {\r\n        tags.innerHTML += `<span class=\"tag-pill\">${t}<\/span>`;\r\n    });\r\n    \r\n    document.getElementById('mSource').innerText = \"Source: \" + (item.source || \"Industry Standard Technical Brief\");\r\n    document.getElementById('infoModal').classList.add('open');\r\n    document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeModal() {\r\n    document.getElementById('infoModal').classList.remove('open');\r\n    document.body.style.overflow = '';\r\n}\r\n\r\n\/\/ --- FILTERS ---\r\nfunction createFilters(data) {\r\n    const c = document.getElementById('filtersContainer');\r\n    const all = document.querySelector('[data-filter=\"all\"]');\r\n    c.innerHTML = ''; c.appendChild(all);\r\n\r\n    const sectors = [...new Set(data.map(i => i.industry_code))].filter(Boolean);\r\n    \r\n    sectors.forEach(code => {\r\n        const b = document.createElement('button');\r\n        b.className = 'filter-chip';\r\n        b.innerText = code.toUpperCase();\r\n        b.onclick = (e) => {\r\n            document.querySelectorAll('.filter-chip').forEach(x => x.classList.remove('active'));\r\n            e.target.classList.add('active');\r\n            renderCards(data.filter(i => i.industry_code === code));\r\n        };\r\n        c.appendChild(b);\r\n    });\r\n\r\n    all.onclick = (e) => {\r\n        document.querySelectorAll('.filter-chip').forEach(x => x.classList.remove('active'));\r\n        e.target.classList.add('active');\r\n        renderCards(db);\r\n    }\r\n}\r\n\r\n\/\/ --- SEARCH ---\r\nfunction setupSearch() {\r\n    document.getElementById('wikiSearch').addEventListener('input', (e) => {\r\n        const v = e.target.value.toLowerCase();\r\n        const results = db.filter(i => \r\n            i.title.toLowerCase().includes(v) || \r\n            i.full_definition.toLowerCase().includes(v) ||\r\n            (i.tags && i.tags.some(t => t.toLowerCase().includes(v)))\r\n        );\r\n        renderCards(results);\r\n    });\r\n}\r\n\r\n\/\/ Event Listeners for Closing\r\ndocument.getElementById('infoModal').addEventListener('click', e => { if(e.target.id==='infoModal') closeModal(); });\r\ndocument.addEventListener('keydown', e => { if(e.key==='Escape') closeModal(); });\r\n<\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Wikitechnology All Sectors Title Sector Detailed Definition Practical Application Reference Tags<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-180677","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/180677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/comments?post=180677"}],"version-history":[{"count":0,"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/pages\/180677\/revisions"}],"wp:attachment":[{"href":"https:\/\/megatraining.africa\/en\/wp-json\/wp\/v2\/media?parent=180677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}