Faculty Website - Home<\/title>\r\n <meta name=\"description\" content=\"Faculty main page with counters and faculty structure.\" \/>\r\n\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#111a2e;\r\n --muted:#9fb0d0;\r\n --text:#e9eefc;\r\n --line:rgba(255,255,255,.12);\r\n --accent:#6ea8ff;\r\n --accent2:#7dffcf;\r\n --shadow: 0 14px 40px rgba(0,0,0,.35);\r\n --radius:18px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(900px 500px at 10% 0%, rgba(110,168,255,.22), transparent 60%),\r\n radial-gradient(900px 500px at 90% 10%, rgba(125,255,207,.16), transparent 55%),\r\n linear-gradient(180deg, #070b14, var(--bg));\r\n min-height:100vh;\r\n }\r\n a{color:inherit}\r\n .container{max-width:1150px; margin:0 auto; padding:26px 18px 70px}\r\n .nav{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:14px 18px; border:1px solid var(--line); border-radius:999px;\r\n background:rgba(17,26,46,.65); backdrop-filter: blur(10px);\r\n box-shadow: var(--shadow);\r\n position: sticky; top: 16px; z-index: 10;\r\n }\r\n .brand{display:flex; align-items:center; gap:10px; font-weight:700}\r\n .logo{\r\n width:34px;height:34px;border-radius:10px;\r\n background:linear-gradient(135deg,var(--accent),var(--accent2));\r\n box-shadow:0 10px 25px rgba(110,168,255,.18);\r\n }\r\n .nav a{\r\n text-decoration:none; font-weight:600; opacity:.9;\r\n padding:10px 12px; border-radius:999px;\r\n }\r\n .nav a:hover{background:rgba(255,255,255,.06)}\r\n .navlinks{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}\r\n\r\n .hero{\r\n margin-top:22px;\r\n border:1px solid var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(17,26,46,.55);\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n position:relative;\r\n }\r\n .hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; padding:28px}\r\n @media (max-width: 900px){\r\n .hero-inner{grid-template-columns: 1fr; padding:22px}\r\n .nav{position:relative; top:auto}\r\n }\r\n .badge{\r\n display:inline-flex; gap:8px; align-items:center;\r\n border:1px solid var(--line);\r\n background: rgba(255,255,255,.04);\r\n padding:8px 12px; border-radius:999px;\r\n color: var(--muted);\r\n font-weight:600;\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:var(--accent2)}\r\n h1{margin:14px 0 10px; font-size: clamp(28px, 3.2vw, 44px); line-height:1.1}\r\n .lead{color:var(--muted); font-size: 1.05rem; line-height:1.6; margin: 0 0 18px}\r\n .cta{display:flex; gap:10px; flex-wrap:wrap}\r\n .btn{\r\n border:none; cursor:pointer; text-decoration:none;\r\n padding:12px 16px; border-radius: 12px; font-weight:700;\r\n background: linear-gradient(135deg, var(--accent), var(--accent2));\r\n color:#05101f;\r\n box-shadow: 0 16px 35px rgba(110,168,255,.18);\r\n }\r\n .btn.secondary{\r\n background: rgba(255,255,255,.06);\r\n color: var(--text);\r\n border:1px solid var(--line);\r\n box-shadow:none;\r\n }\r\n .btn:hover{transform: translateY(-1px)}\r\n .btn:active{transform: translateY(0px)}\r\n\r\n .stats{\r\n display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap:12px; align-content:start;\r\n }\r\n .stat-card{\r\n border:1px solid var(--line);\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.04);\r\n padding:16px;\r\n }\r\n .stat-top{display:flex; align-items:center; justify-content:space-between; gap:10px}\r\n .pill{\r\n font-size:.78rem; font-weight:700; letter-spacing:.02em;\r\n color:#bfe3ff;\r\n border:1px solid rgba(110,168,255,.35);\r\n background: rgba(110,168,255,.10);\r\n padding:6px 10px; border-radius:999px;\r\n white-space:nowrap;\r\n }\r\n .number{\r\n font-size: 2.1rem; font-weight:800; margin: 12px 0 2px;\r\n }\r\n .label{color: var(--muted); margin:0; font-weight:600}\r\n .section{margin-top:26px}\r\n .section h2{margin:0 0 10px; font-size:1.5rem}\r\n .section p{margin:0 0 14px; color: var(--muted); line-height:1.6}\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap:14px;\r\n }\r\n .card{\r\n grid-column: span 12;\r\n border:1px solid var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(17,26,46,.55);\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n }\r\n .card-head{\r\n padding:16px 18px;\r\n border-bottom:1px solid var(--line);\r\n display:flex; align-items:center; justify-content:space-between; gap:10px;\r\n }\r\n .card-body{padding:18px}\r\n .small{font-size:.95rem; color: var(--muted)}\r\n\r\n \/* Faculty structure *\/\r\n .org{\r\n display:grid;\r\n grid-template-columns: 1fr;\r\n gap:14px;\r\n }\r\n .node{\r\n border:1px solid var(--line);\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.04);\r\n padding:14px;\r\n }\r\n .node-title{display:flex; align-items:center; justify-content:space-between; gap:10px}\r\n .node h3{margin:0; font-size:1.05rem}\r\n .tag{\r\n font-size:.78rem; font-weight:700;\r\n padding:6px 10px; border-radius:999px;\r\n border:1px solid rgba(125,255,207,.35);\r\n background: rgba(125,255,207,.10);\r\n color:#caffee;\r\n white-space:nowrap;\r\n }\r\n .people{\r\n margin-top:12px;\r\n display:grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap:10px;\r\n }\r\n @media (max-width: 900px){ .people{grid-template-columns: repeat(2, minmax(0, 1fr));} }\r\n @media (max-width: 520px){ .people{grid-template-columns: 1fr;} }\r\n\r\n .person{\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n background: rgba(0,0,0,.18);\r\n padding:12px;\r\n display:flex; gap:10px; align-items:flex-start;\r\n }\r\n .avatar{\r\n width:38px; height:38px; border-radius:12px;\r\n background: linear-gradient(135deg, rgba(110,168,255,.6), rgba(125,255,207,.45));\r\n flex:0 0 auto;\r\n }\r\n .person b{display:block; margin-bottom:2px}\r\n .person span{display:block; color: var(--muted); font-size:.92rem}\r\n\r\n footer{\r\n margin-top:28px;\r\n border-top:1px solid var(--line);\r\n padding-top:18px;\r\n color: var(--muted);\r\n display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap;\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n *{scroll-behavior:auto !important}\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"nav\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>Faculty of Engineering<\/div>\r\n <\/div>\r\n <div class=\"navlinks\" aria-label=\"Primary navigation\">\r\n <a href=\"#stats\">Statistics<\/a>\r\n <a href=\"#structure\">Faculty Structure<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Hero\">\r\n <div class=\"hero-inner\">\r\n <div>\r\n <div class=\"badge\"><span class=\"dot\"><\/span> Main Page<\/div>\r\n <h1>\u0633\u064a\u062f \u0627\u0628\u0631\u0627\u0647\u064a\u0645<\/h1>\r\n <p class=\"lead\">\r\n Showcase your community with live counters for students and alumni, and\r\n present your faculty structure in a clear, modern layout.\r\n <\/p>\r\n <div class=\"cta\">\r\n <a class=\"btn\" href=\"https:\/\/www.google.com\/search?gs_ssp=eJzj4tTP1TcwMU02T1JgNGB0YPBiS8_PT89JBQBASQXT&q=google&oq=%D9%84%D8%AE%D8%AE&gs_lcrp=EgZjaHJvbWUqDwgBEC4YChjHARjRAxiABDIGCAAQRRg5Mg8IARAuGAoYxwEY0QMYgAQyCQgCEAAYChiABDIJCAMQABgKGIAEMgkIBBAAGAoYgAQyBwgFEAAYgAQyBwgGEAAYgAQyCQgHEAAYChiABDIJCAgQABgKGIAE0gEIMzY4M2owajeoAgCwAgA&sourceid=chrome&ie=UTF-8\" target=\"_blank\" rel=\"noopener\">View Faculty Structure<\/a>\r\n <a class=\"btn secondary\" href=\"#contact\">Get in Touch<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats\" id=\"stats\">\r\n \r\n <div class=\"stat-card\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Students<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83c\udf93<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"12500\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Enrolled across all departments<\/p>\r\n <\/div>\r\n\r\n <div class=\"stat-card\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Alumni<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83c\udfc5<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"48000\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Graduates worldwide<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"stat-card\" style=\"grid-column: span 2;\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Faculty Members<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83d\udc69\u200d\ud83c\udfeb<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"320\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Academic staff and researchers<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"structure\" aria-label=\"Faculty structure\">\r\n <h2>Faculty Members Structure<\/h2>\r\n <p>\r\n Edit names and departments below to match your real organizational structure.\r\n <\/p>\r\n\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-head\">\r\n <div>\r\n <b>Organization Chart<\/b>\r\n <div class=\"small\">Dean \u2192 Departments \u2192 Members<\/div>\r\n <\/div>\r\n <div class=\"pill\">Updated<\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"org\">\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Dean Office<\/h3>\r\n <span class=\"tag\">Leadership<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Prof. Name Here<\/b>\r\n <span>Dean<\/span>\r\n <span>dean@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Vice Dean<\/span>\r\n <span>vdean@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Ms. Name Here<\/b>\r\n <span>Office Manager<\/span>\r\n <span>office@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Computer Engineering Department<\/h3>\r\n <span class=\"tag\">Department<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Head of Department<\/span>\r\n <span>hod-ce@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Assistant Professor<\/span>\r\n <span>staff1@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Lecturer<\/span>\r\n <span>staff2@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Civil Engineering Department<\/h3>\r\n <span class=\"tag\">Department<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Head of Department<\/span>\r\n <span>hod-cv@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Assistant Professor<\/span>\r\n <span>staff3@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Lecturer<\/span>\r\n <span>staff4@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"contact\" aria-label=\"Contact\">\r\n <h2>Contact<\/h2>\r\n <p>Put your address, phone, and email here.<\/p>\r\n\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap:14px;\">\r\n <div style=\"border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.04);\">\r\n <b>Address<\/b>\r\n <div class=\"small\" style=\"margin-top:6px;\">\r\n Your University<br\/>City, Country\r\n <\/div>\r\n <\/div>\r\n <div style=\"border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.04);\">\r\n <b>Email<\/b>\r\n <div class=\"small\" style=\"margin-top:6px;\">\r\n info@yourdomain.edu<br\/>+000 000 0000\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"small\" style=\"margin-top:14px;\">\r\n Tip: Replace placeholder emails with real ones, or remove them if you don\u2019t want to publish addresses.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <div>\u00a9 <span id=\"year\"><\/span> Faculty of Engineering<\/div>\r\n <div>Designed with HTML\/CSS\/JS<\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Footer year\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Counter animation (runs when counters appear in viewport)\r\n function animateCounter(el){\r\n const target = Number(el.getAttribute('data-target')) || 0;\r\n const suffix = el.getAttribute('data-suffix') || '';\r\n const duration = 1200; \/\/ ms\r\n const start = performance.now();\r\n\r\n const formatter = new Intl.NumberFormat(undefined);\r\n\r\n function tick(now){\r\n const t = Math.min(1, (now - start) \/ duration);\r\n \/\/ easeOutCubic\r\n const eased = 1 - Math.pow(1 - t, 3);\r\n const value = Math.round(eased * target);\r\n el.textContent = formatter.format(value) + suffix;\r\n\r\n if(t < 1) requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n }\r\n\r\n const counters = document.querySelectorAll('[data-counter]');\r\n const observer = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if(entry.isIntersecting){\r\n animateCounter(entry.target);\r\n obs.unobserve(entry.target); \/\/ run once\r\n }\r\n });\r\n }, { threshold: 0.35 });\r\n\r\n counters.forEach(c => observer.observe(c));\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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>","protected":false},"excerpt":{"rendered":"<p><!doctype html> Faculty of Engineering Statistics Faculty Structure Contact Main Page Welcome to the Faculty Portal Showcase your community with live counters for students and alumni, and present your faculty structure in a clear, modern layout. View Faculty Structure Get in Touch Students \ud83c\udf93 0 Enrolled across all departments Alumni \ud83c\udfc5 0 Graduates […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1874","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/comments?post=1874"}],"version-history":[{"count":2,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874\/revisions"}],"predecessor-version":[{"id":1884,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874\/revisions\/1884"}],"wp:attachment":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/media?parent=1874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Faculty Website - Home<\/title>\r\n <meta name=\"description\" content=\"Faculty main page with counters and faculty structure.\" \/>\r\n\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#111a2e;\r\n --muted:#9fb0d0;\r\n --text:#e9eefc;\r\n --line:rgba(255,255,255,.12);\r\n --accent:#6ea8ff;\r\n --accent2:#7dffcf;\r\n --shadow: 0 14px 40px rgba(0,0,0,.35);\r\n --radius:18px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(900px 500px at 10% 0%, rgba(110,168,255,.22), transparent 60%),\r\n radial-gradient(900px 500px at 90% 10%, rgba(125,255,207,.16), transparent 55%),\r\n linear-gradient(180deg, #070b14, var(--bg));\r\n min-height:100vh;\r\n }\r\n a{color:inherit}\r\n .container{max-width:1150px; margin:0 auto; padding:26px 18px 70px}\r\n .nav{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:14px 18px; border:1px solid var(--line); border-radius:999px;\r\n background:rgba(17,26,46,.65); backdrop-filter: blur(10px);\r\n box-shadow: var(--shadow);\r\n position: sticky; top: 16px; z-index: 10;\r\n }\r\n .brand{display:flex; align-items:center; gap:10px; font-weight:700}\r\n .logo{\r\n width:34px;height:34px;border-radius:10px;\r\n background:linear-gradient(135deg,var(--accent),var(--accent2));\r\n box-shadow:0 10px 25px rgba(110,168,255,.18);\r\n }\r\n .nav a{\r\n text-decoration:none; font-weight:600; opacity:.9;\r\n padding:10px 12px; border-radius:999px;\r\n }\r\n .nav a:hover{background:rgba(255,255,255,.06)}\r\n .navlinks{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}\r\n\r\n .hero{\r\n margin-top:22px;\r\n border:1px solid var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(17,26,46,.55);\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n position:relative;\r\n }\r\n .hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; padding:28px}\r\n @media (max-width: 900px){\r\n .hero-inner{grid-template-columns: 1fr; padding:22px}\r\n .nav{position:relative; top:auto}\r\n }\r\n .badge{\r\n display:inline-flex; gap:8px; align-items:center;\r\n border:1px solid var(--line);\r\n background: rgba(255,255,255,.04);\r\n padding:8px 12px; border-radius:999px;\r\n color: var(--muted);\r\n font-weight:600;\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:var(--accent2)}\r\n h1{margin:14px 0 10px; font-size: clamp(28px, 3.2vw, 44px); line-height:1.1}\r\n .lead{color:var(--muted); font-size: 1.05rem; line-height:1.6; margin: 0 0 18px}\r\n .cta{display:flex; gap:10px; flex-wrap:wrap}\r\n .btn{\r\n border:none; cursor:pointer; text-decoration:none;\r\n padding:12px 16px; border-radius: 12px; font-weight:700;\r\n background: linear-gradient(135deg, var(--accent), var(--accent2));\r\n color:#05101f;\r\n box-shadow: 0 16px 35px rgba(110,168,255,.18);\r\n }\r\n .btn.secondary{\r\n background: rgba(255,255,255,.06);\r\n color: var(--text);\r\n border:1px solid var(--line);\r\n box-shadow:none;\r\n }\r\n .btn:hover{transform: translateY(-1px)}\r\n .btn:active{transform: translateY(0px)}\r\n\r\n .stats{\r\n display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap:12px; align-content:start;\r\n }\r\n .stat-card{\r\n border:1px solid var(--line);\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.04);\r\n padding:16px;\r\n }\r\n .stat-top{display:flex; align-items:center; justify-content:space-between; gap:10px}\r\n .pill{\r\n font-size:.78rem; font-weight:700; letter-spacing:.02em;\r\n color:#bfe3ff;\r\n border:1px solid rgba(110,168,255,.35);\r\n background: rgba(110,168,255,.10);\r\n padding:6px 10px; border-radius:999px;\r\n white-space:nowrap;\r\n }\r\n .number{\r\n font-size: 2.1rem; font-weight:800; margin: 12px 0 2px;\r\n }\r\n .label{color: var(--muted); margin:0; font-weight:600}\r\n .section{margin-top:26px}\r\n .section h2{margin:0 0 10px; font-size:1.5rem}\r\n .section p{margin:0 0 14px; color: var(--muted); line-height:1.6}\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap:14px;\r\n }\r\n .card{\r\n grid-column: span 12;\r\n border:1px solid var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(17,26,46,.55);\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n }\r\n .card-head{\r\n padding:16px 18px;\r\n border-bottom:1px solid var(--line);\r\n display:flex; align-items:center; justify-content:space-between; gap:10px;\r\n }\r\n .card-body{padding:18px}\r\n .small{font-size:.95rem; color: var(--muted)}\r\n\r\n \/* Faculty structure *\/\r\n .org{\r\n display:grid;\r\n grid-template-columns: 1fr;\r\n gap:14px;\r\n }\r\n .node{\r\n border:1px solid var(--line);\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.04);\r\n padding:14px;\r\n }\r\n .node-title{display:flex; align-items:center; justify-content:space-between; gap:10px}\r\n .node h3{margin:0; font-size:1.05rem}\r\n .tag{\r\n font-size:.78rem; font-weight:700;\r\n padding:6px 10px; border-radius:999px;\r\n border:1px solid rgba(125,255,207,.35);\r\n background: rgba(125,255,207,.10);\r\n color:#caffee;\r\n white-space:nowrap;\r\n }\r\n .people{\r\n margin-top:12px;\r\n display:grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap:10px;\r\n }\r\n @media (max-width: 900px){ .people{grid-template-columns: repeat(2, minmax(0, 1fr));} }\r\n @media (max-width: 520px){ .people{grid-template-columns: 1fr;} }\r\n\r\n .person{\r\n border:1px solid var(--line);\r\n border-radius:14px;\r\n background: rgba(0,0,0,.18);\r\n padding:12px;\r\n display:flex; gap:10px; align-items:flex-start;\r\n }\r\n .avatar{\r\n width:38px; height:38px; border-radius:12px;\r\n background: linear-gradient(135deg, rgba(110,168,255,.6), rgba(125,255,207,.45));\r\n flex:0 0 auto;\r\n }\r\n .person b{display:block; margin-bottom:2px}\r\n .person span{display:block; color: var(--muted); font-size:.92rem}\r\n\r\n footer{\r\n margin-top:28px;\r\n border-top:1px solid var(--line);\r\n padding-top:18px;\r\n color: var(--muted);\r\n display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap;\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n *{scroll-behavior:auto !important}\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"nav\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>Faculty of Engineering<\/div>\r\n <\/div>\r\n <div class=\"navlinks\" aria-label=\"Primary navigation\">\r\n <a href=\"#stats\">Statistics<\/a>\r\n <a href=\"#structure\">Faculty Structure<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Hero\">\r\n <div class=\"hero-inner\">\r\n <div>\r\n <div class=\"badge\"><span class=\"dot\"><\/span> Main Page<\/div>\r\n <h1>\u0633\u064a\u062f \u0627\u0628\u0631\u0627\u0647\u064a\u0645<\/h1>\r\n <p class=\"lead\">\r\n Showcase your community with live counters for students and alumni, and\r\n present your faculty structure in a clear, modern layout.\r\n <\/p>\r\n <div class=\"cta\">\r\n <a class=\"btn\" href=\"https:\/\/www.google.com\/search?gs_ssp=eJzj4tTP1TcwMU02T1JgNGB0YPBiS8_PT89JBQBASQXT&q=google&oq=%D9%84%D8%AE%D8%AE&gs_lcrp=EgZjaHJvbWUqDwgBEC4YChjHARjRAxiABDIGCAAQRRg5Mg8IARAuGAoYxwEY0QMYgAQyCQgCEAAYChiABDIJCAMQABgKGIAEMgkIBBAAGAoYgAQyBwgFEAAYgAQyBwgGEAAYgAQyCQgHEAAYChiABDIJCAgQABgKGIAE0gEIMzY4M2owajeoAgCwAgA&sourceid=chrome&ie=UTF-8\" target=\"_blank\" rel=\"noopener\">View Faculty Structure<\/a>\r\n <a class=\"btn secondary\" href=\"#contact\">Get in Touch<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats\" id=\"stats\">\r\n \r\n <div class=\"stat-card\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Students<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83c\udf93<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"12500\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Enrolled across all departments<\/p>\r\n <\/div>\r\n\r\n <div class=\"stat-card\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Alumni<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83c\udfc5<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"48000\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Graduates worldwide<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"stat-card\" style=\"grid-column: span 2;\">\r\n <div class=\"stat-top\">\r\n <div class=\"pill\">Faculty Members<\/div>\r\n <div class=\"small\" aria-hidden=\"true\">\ud83d\udc69\u200d\ud83c\udfeb<\/div>\r\n <\/div>\r\n <div class=\"number\" data-counter data-target=\"320\" data-suffix=\"+\">0<\/div>\r\n <p class=\"label\">Academic staff and researchers<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"structure\" aria-label=\"Faculty structure\">\r\n <h2>Faculty Members Structure<\/h2>\r\n <p>\r\n Edit names and departments below to match your real organizational structure.\r\n <\/p>\r\n\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-head\">\r\n <div>\r\n <b>Organization Chart<\/b>\r\n <div class=\"small\">Dean \u2192 Departments \u2192 Members<\/div>\r\n <\/div>\r\n <div class=\"pill\">Updated<\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"org\">\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Dean Office<\/h3>\r\n <span class=\"tag\">Leadership<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Prof. Name Here<\/b>\r\n <span>Dean<\/span>\r\n <span>dean@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Vice Dean<\/span>\r\n <span>vdean@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Ms. Name Here<\/b>\r\n <span>Office Manager<\/span>\r\n <span>office@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Computer Engineering Department<\/h3>\r\n <span class=\"tag\">Department<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Head of Department<\/span>\r\n <span>hod-ce@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Assistant Professor<\/span>\r\n <span>staff1@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Lecturer<\/span>\r\n <span>staff2@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"node\">\r\n <div class=\"node-title\">\r\n <h3>Civil Engineering Department<\/h3>\r\n <span class=\"tag\">Department<\/span>\r\n <\/div>\r\n <div class=\"people\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Head of Department<\/span>\r\n <span>hod-cv@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Assistant Professor<\/span>\r\n <span>staff3@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <b>Dr. Name Here<\/b>\r\n <span>Lecturer<\/span>\r\n <span>staff4@yourdomain.edu<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"contact\" aria-label=\"Contact\">\r\n <h2>Contact<\/h2>\r\n <p>Put your address, phone, and email here.<\/p>\r\n\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap:14px;\">\r\n <div style=\"border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.04);\">\r\n <b>Address<\/b>\r\n <div class=\"small\" style=\"margin-top:6px;\">\r\n Your University<br\/>City, Country\r\n <\/div>\r\n <\/div>\r\n <div style=\"border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.04);\">\r\n <b>Email<\/b>\r\n <div class=\"small\" style=\"margin-top:6px;\">\r\n info@yourdomain.edu<br\/>+000 000 0000\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"small\" style=\"margin-top:14px;\">\r\n Tip: Replace placeholder emails with real ones, or remove them if you don\u2019t want to publish addresses.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <div>\u00a9 <span id=\"year\"><\/span> Faculty of Engineering<\/div>\r\n <div>Designed with HTML\/CSS\/JS<\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Footer year\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Counter animation (runs when counters appear in viewport)\r\n function animateCounter(el){\r\n const target = Number(el.getAttribute('data-target')) || 0;\r\n const suffix = el.getAttribute('data-suffix') || '';\r\n const duration = 1200; \/\/ ms\r\n const start = performance.now();\r\n\r\n const formatter = new Intl.NumberFormat(undefined);\r\n\r\n function tick(now){\r\n const t = Math.min(1, (now - start) \/ duration);\r\n \/\/ easeOutCubic\r\n const eased = 1 - Math.pow(1 - t, 3);\r\n const value = Math.round(eased * target);\r\n el.textContent = formatter.format(value) + suffix;\r\n\r\n if(t < 1) requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n }\r\n\r\n const counters = document.querySelectorAll('[data-counter]');\r\n const observer = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if(entry.isIntersecting){\r\n animateCounter(entry.target);\r\n obs.unobserve(entry.target); \/\/ run once\r\n }\r\n });\r\n }, { threshold: 0.35 });\r\n\r\n counters.forEach(c => observer.observe(c));\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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>","protected":false},"excerpt":{"rendered":"<p><!doctype html> Faculty of Engineering Statistics Faculty Structure Contact Main Page Welcome to the Faculty Portal Showcase your community with live counters for students and alumni, and present your faculty structure in a clear, modern layout. View Faculty Structure Get in Touch Students \ud83c\udf93 0 Enrolled across all departments Alumni \ud83c\udfc5 0 Graduates […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1874","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/comments?post=1874"}],"version-history":[{"count":2,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874\/revisions"}],"predecessor-version":[{"id":1884,"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/pages\/1874\/revisions\/1884"}],"wp:attachment":[{"href":"https:\/\/tucoet.uoturath.edu.iq\/en\/wp-json\/wp\/v2\/media?parent=1874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}