{"id":6940,"date":"2022-07-05T08:56:05","date_gmt":"2022-07-05T00:56:05","guid":{"rendered":"https:\/\/www.plklsp.edu.hk\/?page_id=6940"},"modified":"2026-01-06T16:01:14","modified_gmt":"2026-01-06T08:01:14","slug":"facilities","status":"publish","type":"page","link":"https:\/\/www.plklsp.edu.hk\/zh\/facilities\/","title":{"rendered":"\u5b78\u6821\u8a2d\u65bd"},"content":{"rendered":"<style>\n  .wing-table-wrap{\n    \/* ===== New color scheme ===== *\/\n    --bg:#ffffff;\n    --text:#0b1220;\n    --muted:#475569;\n    --line:#e5e7eb;<\/p>\n<p>    \/* Brand accents *\/\n    --accent:#4f46e5;     \/* indigo *\/\n    --accent-2:#06b6d4;   \/* cyan *\/<\/p>\n<p>    \/* Surfaces *\/\n    --surface:#f8fafc;    \/* slate-50 *\/\n    --surface-2:#f1f5f9;  \/* slate-100 *\/<\/p>\n<p>    \/* Columns *\/\n    --old:#eef2ff;        \/* indigo-50 *\/\n    --old-2:#e0e7ff;      \/* indigo-100 *\/\n    --new:#ecfeff;        \/* cyan-50 *\/\n    --new-2:#cffafe;      \/* cyan-100 *\/<\/p>\n<p>    \/* Floor *\/\n    --floor:#f1f5ff;      \/* soft indigo slate *\/\n    --floor-2:#e8edff;<\/p>\n<p>    --shadow:0 14px 40px rgba(2,6,23,.10);\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\";\n    color:var(--text);\n  }<\/p>\n<p>  \/* ---------- table base ---------- *\/\n  .wing-table{\n    width:100%;\n    max-width: 900px;\n    border-collapse: separate;\n    border-spacing:0;\n    background:linear-gradient(180deg,var(--bg), var(--surface));\n    border:1px solid var(--line);\n    border-radius:18px;\n    overflow:hidden;\n    box-shadow:var(--shadow);\n    margin: 0 auto;\n  }\n  .wing-table th, .wing-table td{\n    padding:14px 14px;\n    vertical-align: top;\n    border-bottom:1px solid var(--line);\n  }\n  .wing-table tr:last-child td{ border-bottom:none; }<\/p>\n<p>  \/* Header *\/\n  .wing-table thead th{\n    font-weight:800;\n    letter-spacing:.2px;\n    font-size:15px;\n    color:#0b1220;\n    position:relative;\n    overflow:hidden;\n  }\n  .wing-table .h-floor{\n    width:92px;\n    background:linear-gradient(180deg,var(--surface), var(--surface-2));\n    border-right:1px solid var(--line);\n  }\n  .wing-table .h-old{\n    background:\n      linear-gradient(135deg,var(--old), var(--old-2));\n    text-align:center;\n    border-bottom:1px solid rgba(79,70,229,.18);\n  }\n  .wing-table .h-new{\n    background:\n      linear-gradient(135deg,var(--new), var(--new-2));\n    text-align:center;\n    border-bottom:1px solid rgba(6,182,212,.18);\n  }<\/p>\n<p>  \/* Floor column *\/\n  .wing-table .floor{\n    background:linear-gradient(180deg,var(--floor), var(--floor-2));\n    border-right:1px solid var(--line);\n    text-align:center;\n    font-weight:900;\n    white-space:nowrap;\n  }\n  .wing-table .floor .badge{\n    display:inline-block;\n    padding:6px 10px;\n    border-radius:999px;\n    background:rgba(255,255,255,.75);\n    border:1px solid rgba(148,163,184,.55);\n    font-size:13px;\n    color:#0f172a;\n    box-shadow: 0 6px 14px rgba(2,6,23,.08);\n  }<\/p>\n<p>  \/* Old \/ New cells *\/\n  .wing-table .old{ background: rgba(238,242,255,.72); }\n  .wing-table .new{ background: rgba(236,254,255,.70); }<\/p>\n<p>  \/* Lists *\/\n  .wing-table ul{\n    margin:0;\n    padding:0;\n    list-style:none;\n    display:grid;\n    gap:8px;\n  }<\/p>\n<p>  .wing-table .old li::before{ background: var(--accent); }\n  .wing-table .new li::before{ background: var(--accent-2); }<\/p>\n<p>  \/* Subtle divider between Old columns + New column *\/\n  .wing-table .old + .old{ border-left:1px dashed rgba(99,102,241,.35); }\n  .wing-table .new{ border-left:1px solid rgba(6,182,212,.25); }<\/p>\n<p>  \/* ---------- animations (unchanged behavior, retinted) ---------- *\/\n  .wing-table tbody tr{\n    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;\n    will-change: transform;\n    opacity:0;\n    transform: translateY(10px);\n  }\n  .wing-table tbody tr.is-visible{\n    opacity:1;\n    transform: translateY(0);\n    transition: opacity .55s ease, transform .55s ease;\n    transition-delay: var(--d, 0ms);\n  }\n  .wing-table tbody tr:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 14px 34px rgba(2,6,23,.10);\n  }<\/p>\n<p>  \/* header sheen recolored *\/\n  .wing-table thead th::after{\n    content:\"\";\n    position:absolute;\n    inset:-60% -40%;\n    background: linear-gradient(\n      120deg,\n      transparent 30%,\n      rgba(255,255,255,.55) 50%,\n      transparent 70%\n    );\n    transform: translateX(-60%) rotate(8deg);\n    opacity:0;\n  }\n  .wing-table:hover thead th::after{\n    animation: wingSheen 1.1s ease both;\n    opacity:1;\n  }\n  @keyframes wingSheen{\n    from{ transform: translateX(-60%) rotate(8deg); }\n    to{ transform: translateX(60%) rotate(8deg); }\n  }<\/p>\n<p>  .wing-table li:hover{ transform: translateX(4px); color:#0f172a; }<\/p>\n<p>  .wing-table tbody tr:hover .badge{ animation: badgePop .35s ease both; }\n  @keyframes badgePop{\n    0%{ transform: scale(1); }\n    60%{ transform: scale(1.06); }\n    100%{ transform: scale(1.02); }\n  }<\/p>\n<p>  \/* Respect reduced motion *\/\n  @media (prefers-reduced-motion: reduce){\n    .wing-table *, .wing-table *::before, .wing-table *::after{\n      animation: none !important;\n      transition: none !important;\n    }\n    .wing-table tbody tr{ opacity:1; transform:none; }\n  }<\/p>\n<p>  \/* Responsive stacking *\/\n  @media (max-width: 720px){\n    .wing-table{ border-radius:16px; }\n    .wing-table thead{ display:none; }\n    .wing-table, .wing-table tbody, .wing-table tr, .wing-table td{ display:block; width:100%; }\n    .wing-table td{ border-bottom:none; }\n    .wing-table tr{\n      border-bottom:1px solid var(--line);\n      padding:12px 12px;\n      background: transparent;\n    }\n    .wing-table tr:last-child{ border-bottom:none; }\n    .wing-table .floor{\n      border-right:none;\n      padding:0 0 10px 0;\n      background:transparent;\n      text-align:left;\n    }\n    .wing-table .old, .wing-table .new{\n      border-left:none !important;\n      border:1px solid rgba(148,163,184,.35);\n      border-radius:14px;\n      margin-top:10px;\n      box-shadow: 0 10px 20px rgba(2,6,23,.06);\n    }\n    .wing-table .old::before,\n    .wing-table .new::before{\n      display:block;\n      font-weight:900;\n      font-size:12px;\n      letter-spacing:.3px;\n      color:var(--muted);\n      margin-bottom:10px;\n      text-transform: uppercase;\n    }\n    .wing-table .old::before{ content:\"Old Wing\"; }\n    .wing-table .new::before{ content:\"New Wing\"; }\n  }\n<\/style>\n<div class=\"wing-table-wrap\">\n<table class=\"wing-table\" aria-label=\"Old Wing and New Wing room list by floor\">\n<thead>\n<tr>\n<th class=\"h-old\" colspan=\"3\">Old Wing<\/th>\n<th class=\"h-new\">New Wing<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"floor\"><span class=\"badge\">G\/F<\/span><\/td>\n<td class=\"old\">\n<ul>\n<li>Room A01<\/li>\n<li>Room A03<\/li>\n<li>Room G03<\/li>\n<li>Room G04<\/li>\n<\/ul>\n<\/td>\n<td class=\"old\">\n<ul>\n<li>Playground<\/li>\n<li>Medical Room<\/li>\n<li>General Office<\/li>\n<li>Design &amp; Technology Room<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>Covered Playground<\/li>\n<li>Printing Room<\/li>\n<li>Wellness Hub<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">1\/F<\/span><\/td>\n<td class=\"old\">\n<ul>\n<li>Room 101<\/li>\n<li>Room 102<\/li>\n<li>Room 103<\/li>\n<li>Room 104<\/li>\n<li>Room 105<\/li>\n<li>Room 106<\/li>\n<\/ul>\n<\/td>\n<td class=\"old\">\n<ul>\n<li>Hall<\/li>\n<li>MMLC<\/li>\n<li>Art Room<\/li>\n<li>Music Room<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>Room 111<\/li>\n<li>CAL Room<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">2\/F<\/span><\/td>\n<td class=\"old\">\n<ul>\n<li>Room 201<\/li>\n<li>Room 202<\/li>\n<li>Room 203<\/li>\n<li>Room 204<\/li>\n<li>Room 205<\/li>\n<li>Room 206<\/li>\n<\/ul>\n<\/td>\n<td class=\"old\">\n<ul>\n<li>Computer Room<\/li>\n<li>Technology &amp; Living Room<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>Staff Room<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">3\/F<\/span><\/td>\n<td class=\"old\">\n<ul>\n<li>Room 301<\/li>\n<li>Room 302<\/li>\n<li>Room 303<\/li>\n<li>Room 304<\/li>\n<li>Room 305<\/li>\n<li>Room 306<\/li>\n<\/ul>\n<\/td>\n<td class=\"old\">\n<ul>\n<li>Library<\/li>\n<li>Geography Room<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>Staff Room<\/li>\n<li>Interview Room<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">4\/F<\/span><\/td>\n<td class=\"old\">\n<ul>\n<li>Room 401<\/li>\n<li>Room 402<\/li>\n<li>Room 403<\/li>\n<li>Room 404<\/li>\n<li>Room 405<\/li>\n<li>Room 406<\/li>\n<\/ul>\n<\/td>\n<td class=\"old\">\n<ul>\n<li>Physics Laboratory<\/li>\n<li>Biology Laboratory<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>Room 411<\/li>\n<li>Room 412<\/li>\n<li>Room 413<\/li>\n<li>Room 414<\/li>\n<li>Social Workers Room<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">5\/F<\/span><\/td>\n<td class=\"old\" colspan=\"2\">\n<ul>\n<li>Chemistry Laboratory<\/li>\n<li>I.S. Laboratory<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\">\n<ul>\n<li>SAC<\/li>\n<li>Conference Room<\/li>\n<li>Education Psychologist Room<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td class=\"floor\"><span class=\"badge\">6\/F<\/span><\/td>\n<td class=\"old\" colspan=\"2\">\n<ul>\n<li>Roof<\/li>\n<\/ul>\n<\/td>\n<td class=\"new\"><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><script>\n  \/\/ Scroll reveal with stagger per row\n  (function () {\n    const table = document.querySelector('.wing-table');\n    if (!table) return;<\/p>\n<p>    const rows = Array.from(table.querySelectorAll('tbody tr'));\n    rows.forEach((tr, i) => tr.style.setProperty('--d', (i * 90) + 'ms'));<\/p>\n<p>    const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReduced) {\n      rows.forEach(tr => tr.classList.add('is-visible'));\n      return;\n    }<\/p>\n<p>    const io = new IntersectionObserver((entries) => {\n      for (const e of entries) {\n        if (e.isIntersecting) {\n          e.target.classList.add('is-visible');\n          io.unobserve(e.target);\n        }\n      }\n    }, { threshold: 0.12 });<\/p>\n<p>    rows.forEach(tr => io.observe(tr));\n  })();\n<\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>Old Wing New Wing G\/F Room A01 Room A03 Room G03 Room G04 Playground Medical Room General Office Design &amp; Technology Room Covered Playground Printing [&hellip;]<\/p>","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"xn-wppe-expiration":[],"xn-wppe-expiration-action":[],"xn-wppe-expiration-prefix":[],"footnotes":"","_links_to":"","_links_to_target":""},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Ng Cheuk Hei","author_link":"https:\/\/www.plklsp.edu.hk\/zh\/blog\/author\/nch\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Old Wing New Wing G\/F Room A01 Room A03 Room G03 Room G04 Playground Medical Room General Office Design &amp; Technology Room Covered Playground Printing [&hellip;]","_links":{"self":[{"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/pages\/6940"}],"collection":[{"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/comments?post=6940"}],"version-history":[{"count":16,"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/pages\/6940\/revisions"}],"predecessor-version":[{"id":10623,"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/pages\/6940\/revisions\/10623"}],"wp:attachment":[{"href":"https:\/\/www.plklsp.edu.hk\/zh\/wp-json\/wp\/v2\/media?parent=6940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}