{"id":767,"date":"2024-08-14T23:59:57","date_gmt":"2024-08-14T16:59:57","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=767"},"modified":"2026-05-18T09:07:05","modified_gmt":"2026-05-18T02:07:05","slug":"es-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%84%e0%b8%a3%e0%b8%b9","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=767","title":{"rendered":"E-Service \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e23\u0e39"},"content":{"rendered":"\n<script>\n        \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\n\t\t\/\/ Add these lines at the end of style section\n        const additionalStyles = `\n\t\t\t.loading {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 350px;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tbackground: rgba(0, 0, 139, 0.9); \/* \u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e40\u0e02\u0e49\u0e21 *\/\n\t\t\t\tcolor: #ffffff; \/* \u0e2a\u0e35\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e02\u0e32\u0e27 *\/\n\t\t\t\tpadding: 20px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\t\t\tz-index: 1000;\n\t\t\t}\n\t\t\t .fa-spin {\n\t\t\t\t\tmargin-right: 8px;\n\t\t\t }\n        `;\n\n\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 element style \u0e43\u0e2b\u0e21\u0e48\n\t\tconst styleElement = document.createElement('style');\n\n\t\t\/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 CSS \u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23 additionalStyles \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a styleElement\n\t\tstyleElement.textContent = additionalStyles;\n\n\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 styleElement \u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 <head> \u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\n\t\tdocument.head.appendChild(styleElement);\n\t\t\n        \/\/ Show loading indicator\n        function showLoading(show = true) {\n            const loadingDiv = document.createElement('div');\n            loadingDiv.id = 'loadingIndicator';\n            loadingDiv.className = 'loading';\n            loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i>  \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n            \n            if (show) {\n                document.body.appendChild(loadingDiv);\n            } else {\n                const existingLoader = document.getElementById('loadingIndicator');\n                if (existingLoader) {\n                    existingLoader.remove();\n                }\n            }\n        }\n        \n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\n        function delay(ms) {\n            return new Promise(resolve => setTimeout(resolve, ms));\n        }\n        \t\t\n\t\tshowLoading(true);\t\n                delay(1000);\t\n<\/script>\n\n\n\n<script>\n        const group = [\n            ['1', '\u0e07\u0e32\u0e19\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13'],\n            ['2', '\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23'],\n            ['3', '\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25'],\n            ['4', '\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13'],\n            ['5', '\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b'],\n            ['6', '\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48'],\n\t\t\t['7', '\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19']\n        ];\n        const icon_link = [\n['1','1PeDX0v_8itHpgBZnmMFTIeDxXIK14hOJ','https:\/\/docs.google.com\/spreadsheets\/d\/1bZExvWoTuXwNPikn6GA2RMmENjil4ZM6LUuPyj0Sb_w\/edit?usp=sharing','\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e40\u0e25\u0e02\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21'],\n['1','1PemH_Wat8Zapq5xldQ8R9t6snlpXQFCM','https:\/\/docs.google.com\/spreadsheets\/d\/1Of0-uJ4_Axq6CP-gdII07FnC6ZHBI3IFWs-c7mDTpM4\/edit?usp=sharing','\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07'],\n['1','1PgEA_6lv6IqG8ZB3agB5zNyP8ERtZ3HT','https:\/\/docs.google.com\/spreadsheets\/d\/1g9od04p3JLzc28yzGOob-hReZ7_YBgZQ4_8mNIqV060\/edit?usp=sharing','\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e02\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07'],\n['1','1Pgh--63uk7rZHfTgqNmMJOcQ5UWcrHsk','https:\/\/docs.google.com\/spreadsheets\/d\/177Vx0t6R7a7-HjBQZ2h-nspimshGAGzddPaPCIQ2Qds\/edit?gid=0#gid=0','\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e01\u0e35\u0e22\u0e23\u0e15\u0e34\u0e1a\u0e31\u0e15\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19'],\n\n['2','1PoYX1xMjJYFaINCwAdzx_BQXP3eU2Foy','https:\/\/docs.google.com\/spreadsheets\/d\/1upmm28hReE8xlhK5F2bjgGnuhVq5wF-jQP3umrs9Owo\/edit?usp=sharing','\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 DMC \u0e23\u0e30\u0e22\u0e301-10\u0e21\u0e34\u0e22'],\n['2','1PoYX1xMjJYFaINCwAdzx_BQXP3eU2Foy','https:\/\/docs.google.com\/spreadsheets\/d\/1upmm28hReE8xlhK5F2bjgGnuhVq5wF-jQP3umrs9Owo\/edit?usp=sharing','\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 DMC \u0e23\u0e30\u0e22\u0e302-11\u0e1e\u0e22'],\n['2','1PkkTJcEhcjQLNAHQlzKtk7Wucwg89rdf','https:\/\/drive.google.com\/drive\/u\/1\/folders\/1cL2-2fQKvB5dZgqQLGwpFO9SEl4iQIMK','\u0e23\u0e30\u0e1a\u0e1a \u0e1b\u0e1e5-online'],\n['2','1Ph0UO_Jq5RYXvc1VdLf_BhAUOHsdmNxx','https:\/\/docs.google.com\/document\/d\/156GdmdxWotYK4SbuOSryClQQtOSqEOPPwa1uYayhycQ\/edit','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 \u0e1b\u0e1e5-online'],\n['2','1QJEDj-YA-dZ_XpasbWpAE9pV8bVw2moz','https:\/\/sgs4.bopp-obec.info\/sgs\/Security\/SignIn.aspx','\u0e01\u0e23\u0e2d\u0e01\u0e04\u0e30\u0e41\u0e19\u0e19 SGS'],\n\n['3','1rxuimyvgMmJ_L15aBDAT5S7a-_n5Ca8C','https:\/\/tubtimsiam04.ac.th\/?page_id=97#pa_page','\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e15\u0e01\u0e25\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e07\u0e32\u0e19 PA 1\u0e2a'],\n['3','1sEc1qtJJaKg-6MO_FC1m_2Y1MgpTZcoh','https:\/\/tubtimsiam04.ac.th\/?page_id=97#pa_page','\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e02\u0e49\u0e2d\u0e15\u0e01\u0e25\u0e07 PA'],\n['3','1s8_RRpcWmboohocWZjisWDD22Ah9m8pi','https:\/\/tubtimsiam04.ac.th\/?page_id=2574#work_round','\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39 \u0e23\u0e2d\u0e1a 6 \u0e40\u0e14\u0e37\u0e2d\u0e19'],\n['3','1sdPGypqEKJXQ7UrD9TncZuwbVQZT8SJI','https:\/\/drive.google.com\/drive\/u\/2\/folders\/1mWWBFblpFHz3WftnGtbknBdmzxYKxkNu','\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07 PA'],\n['3','1shJz5nSya--dTsw9rolGZ2EFaw2DKq0w','https:\/\/drive.google.com\/drive\/u\/2\/folders\/1jUdWrjFR6MsnVOyPV6FVt4PLkUvr0z9g','\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e2f \u0e23\u0e2d\u0e1a 6 \u0e40\u0e14\u0e37\u0e2d\u0e19'],\n['3','1rRxJVETxvWCr7MLI4vUev-o2Zi6GAi2B','https:\/\/tubtimsiam04.ac.th\/TeacherLeave\/','\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e25\u0e32 Online'],\n['3','1rWeQ70qMwyGARlfIQ5GJAv6IQiSwT8sO','https:\/\/docs.google.com\/spreadsheets\/d\/1jpBM9DqgpHLVk9bFfgXnRowFYbIjLOjo2qj9sfGm4MA','\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25'],\n['3','1r_nmJTAFr-dOBEfZxq6D8mbeQ6KYaZz7','https:\/\/www.ksp.or.th\/ksp-selfservice','\u0e43\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e'],\n['3','1rg8yEi49_WwW3fQYy4AfV6NlsNK0ek4o','http:\/\/salaryweb1.sesao33.net\/','\u0e2a\u0e25\u0e34\u0e1b\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19'],\n['3','1raNdQH6Az0x5ucRVZNm9ImyrggOywUE-','http:\/\/salaryweb3.sesao33.net\/','\u0e2a\u0e25\u0e34\u0e1b\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e04\u0e23\u0e39'],\n['3','1PbmG3aLx8FKqVZjGFxNDp9CmtJcE-3tA','https:\/\/drive.google.com\/file\/d\/1csFypcWvnP0BD2Dfr5Ofv0i1HwJ25ndg\/view','\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e01\u0e32\u0e23\u0e25\u0e32'],\n['3','1sa0VCJlERDxL8qHwi3fdHkjIKYKYdhV5','https:\/\/drive.google.com\/file\/d\/1nRYK8Bfy1B6CMH_LZsJDBYlyyp1OcAje\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25'],\n['3','1rTKauVIOuKY4rHPFdRW2x071n2Fmnefw','https:\/\/drive.google.com\/file\/d\/1YyQ7Y_X9mCUTY1VPZoHnNrSM3Dw36U1V\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e25\u0e32\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c'],\n['3','1sP8hP_3MfWLTLKgbR0Kx8cmCIvTW0w25','https:\/\/drive.google.com\/file\/d\/1sPIKPqYg2Z0Fm5IX94HwbWlWQ3NbEl1n\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e1e\u0e25\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e2a\u0e25\u0e34\u0e1b\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19'],\n['3','','https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSfBxx0JJJoHlaTGog683wvBfauTmaVIWayOQmFOabn_G8tYvw\/viewform','\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d \u0e01.\u0e1e.7 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e2a\u0e1e\u0e21.\u0e2a\u0e38\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c'],\n\n\n['4','1PwkaqIG0NMGX5v0iHTzezlKtdhKPAt6f','https:\/\/docs.google.com\/spreadsheets\/d\/1DP_r5N2dPYLY8vg3ikNI-KZQzpHZsWKbbl61hvsqh4Q\/edit?gid=970011566#gid=970011566','\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38 \u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 2566(\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5,000)'],\n['4','1Pxx5iQZnOlvCxUD3hHtaXT4x8ua0YYAq','https:\/\/docs.google.com\/spreadsheets\/d\/1eZE1HnLe_y1RfI2lAfTPQYbfVQViVEZ_LWZObwlkOZ8\/edit?gid=970011566#gid=970011566','\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38 \u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 2567(\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 5,000)'],\n['4','','https:\/\/uniform.bopp-obec.info\/','\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e1a\u0e1a\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e38\u0e14\u0e17\u0e35\u0e48 2 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e22\u0e32\u0e01\u0e08\u0e19'],\n\n['5','1PzLcN_vSEBygxJRPejR2kJKPXiI13lBW','https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSeUZ931BWS2IcjByKvOvcVbs-_WI4QRJv8eVsXFViTvsm37Lg\/viewform','\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e0a\u0e47\u0e04\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21'],\n\n['6','1Q1axylcl3V6-wGJd_nTaU3YwND0Lk2bx','https:\/\/drive.google.com\/file\/d\/1UTmEQzyFIT_QoH-WQNLZlZvutdLMAqu9\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23'],\n['6','1Q4GRPXn1Y01CvPvPvoh3qa8E9eIrS1Zm','https:\/\/drive.google.com\/file\/d\/150_cJJvruKEqYiXC4imEStXzTFCZId-F\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13'],\n['6','1QEWDxvSPYiqtfGi1iVjlNMxgTi8MA2MC','https:\/\/drive.google.com\/file\/d\/1nRYK8Bfy1B6CMH_LZsJDBYlyyp1OcAje\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25'],\n['6','1QEYffV1AuG-WWhVVL-yv_RduBnF1lIKo','https:\/\/drive.google.com\/file\/d\/1PRJp7nHXjJUSB4QUwWbwfEThBC1RO4mr\/view','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b'],\n\n['7','1QGF1IEMXTppD9TV2RD-HX7fl2muh93X1','https:\/\/tubtimsiam04.ac.th\/?page_id=1404','\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 GoogleDrive'],\n['7','1QHYkZpS4mZIIzJyDefWxC2d9M9n4td13','https:\/\/www.youtube.com\/playlist?list=PL232W5GzmIvQAsGV4TRK3HsLzj5XcCG0h','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 Zipgrade'],\n['7','1QI_wC68YRy0T4EsznHgiI_vC-YIBXgxN','https:\/\/www.youtube.com\/playlist?list=PL232W5GzmIvR8hnMEOANBATu5Oikl17yY','\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 GoogleApp']\n\n        ];\n<\/script>\n\n\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Icon Gallery Grouped<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Kanit', sans-serif;\n            background-color: #f0f0f0;\n            margin: 0;\n            padding: 0px;\n        }\n        .container {\n            width: 96%;\n            \/\/max-width: 1200px;\n            margin: 0 auto;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            padding: 20px;\n        }\n        .group-title {\n            font-size: 18px;\n            font-weight: bold;\n            margin-top: 1px;\n            margin-bottom: 15px;\n            color: #333;\n            border-bottom: 3px solid #3498db;\n            padding-bottom: 5px;\n            \n            \/\/background-color: #3498db;\n        }\n        .icon-gallery {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n        .icon-item {\n            background-color: white;\n            text-align: center;\n            height: 140px;\n            position: relative;\n            overflow: hidden;\n            border-radius: 5px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        .icon-item:hover {\n            \/\/transform: translateY(-5px);\n            transform: scale(1.05);\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);\n        }\n        .icon-item img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            cursor: pointer;\n        }\n        .icon-item .icon-name {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background-color: rgba(0, 0, 0, 0.7);\n            color: white;\n            font-size: 15px;\n            \/\/font-weight: bold;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 45px;\n            padding: 0 5px;\n            text-align: center;\n            cursor: pointer; \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e04\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e1a\u0e1a\u0e04\u0e25\u0e34\u0e01\u0e44\u0e14\u0e49 *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\" id=\"mainContainer\"><\/div>\n\n    <script>\n        const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n\/*\n        const group = [\n            ['1', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 1 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e211'],\n            ['2', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 2 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e212'],\n            ['3', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 3 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e213'],\n            ['4', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 4 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e214'],\n            ['5', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 5 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e215']\n        ];\n        const icon_link = [\n            ['1','1q1Ab1G2SsSfCak77Acbk8TU0ovTVPPk1','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['1','1qUjHFwtxTFd69JjG1aLfGRghKYOqAolC','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 2\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['1','1qRpTohsN3tTF0EXmSmB_cc78uZsNoGQ_','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 3\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1q09Dp3yiYAxnRrN9nh85ar23toBNXku9','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 4\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1pH56ab52Jl1Dzk6MR1-3ZAEXvw8FYjb3','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 5\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1p8lBcGNPGIpPCd23MOYbxRNQtIr_ExTQ','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 6'],\n            ['3','1oqoiGoe6fpcyetZCr_4NUqiJsYMfIANS','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 7'],\n            ['3','1ok8RQ5DWivQMw5O-nrei-wiQvxufa2il','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 8'],\n            ['5','1ohOaplIzVHm_VdEDwFmiC-09bt2jyhyN','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 9'],\n            ['5','1ob0Ln-KqkNKr4PllDQS9vihE4OQjIKHp','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 10'],\n            ['5','1oX5JJV9YE46A3v63B7h05sX1rAEmrX4I','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 11']\n        ];\n*\/\n\n        function displayGroupedIcons() {\n            const container = document.getElementById('mainContainer');\n            container.innerHTML = '';\n\n\t\t\tgroup.forEach(groupItem => {\n                const [groupId, groupTitle] = groupItem;\n                \n                const groupTitleElement = document.createElement('h2');\n                groupTitleElement.className = 'group-title';\n                groupTitleElement.textContent = groupTitle;\n                container.appendChild(groupTitleElement);\n\n                const galleryElement = document.createElement('div');\n                galleryElement.className = 'icon-gallery';\n                container.appendChild(galleryElement);\n\n                const groupIcons = icon_link.filter(icon => icon[0] === groupId);\n                \n\t\t\t\t\/*\n                groupIcons.forEach(icon => {\n                    const [, imageId, link, label] = icon;\n                    const iconElement = document.createElement('div');\n                    iconElement.className = 'icon-item';\n                    \n                    const img = document.createElement('img');\n                    img.src = `https:\/\/drive.google.com\/thumbnail?id=${imageId}&sz=w220-h110`;\n                    img.alt = `Icon ${label}`;\n                    img.title = `Icon ${label}`;\n                    \n                    img.onclick = () => window.open(link, '_blank');\n                    \n                    iconElement.appendChild(img);\n\n                    const nameElement = document.createElement('div');\n                    nameElement.className = 'icon-name';\n                    nameElement.textContent = label;\n                    iconElement.appendChild(nameElement);\n\n                    galleryElement.appendChild(iconElement);\n                });\n\t\t\t\t*\/\n\t\t\t\tgroupIcons.forEach(icon => {\n\t\t\t\t\tconst [, imageId, link, label] = icon;\n\t\t\t\t\tconst iconElement = document.createElement('div');\n\t\t\t\t\ticonElement.className = 'icon-item';\n\t\t\t\t\t\n\t\t\t\t\tconst img = document.createElement('img');\n\t\t\t\t\timg.src = `https:\/\/drive.google.com\/thumbnail?id=${imageId}&sz=w300`;\n\t\t\t\t\timg.alt = `Icon ${label}`;\n\t\t\t\t\timg.title = `Icon ${label}`;\n\t\t\t\t\t\n\t\t\t\t\tconst nameElement = document.createElement('div');\n\t\t\t\t\tnameElement.className = 'icon-name';\n\t\t\t\t\tnameElement.textContent = label;\n\t\t\t\t\t\n\t\t\t\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e25\u0e34\u0e07\u0e04\u0e4c\n\t\t\t\t\tconst openLink = () => window.open(link, '_blank');\n\t\t\t\t\t\n\t\t\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 event listener \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\n\t\t\t\t\timg.onclick = openLink;\n\t\t\t\t\tnameElement.onclick = openLink;\n\t\t\t\t\t\n\t\t\t\t\ticonElement.appendChild(img);\n\t\t\t\t\ticonElement.appendChild(nameElement);\n\n\t\t\t\t\tgalleryElement.appendChild(iconElement);\n\t\t\t\t});\n            });\n\t\t\t\n\t\t\t\n        }\n\n        \/\/ Display grouped icons when the page loads\n        window.onload = displayGroupedIcons;\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\">.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/drive.google.com\/drive\/u\/1\/folders\/1PclK5X5wnVASfDsWUcdNHZZx74BhJfI3\">https:\/\/drive.google.com\/drive\/u\/1\/folders\/1PclK5X5wnVASfDsWUcdNHZZx74BhJfI3<\/a><\/p>\n\n\n\n<script>\n                delay(1000);\t\n\t\tshowLoading(false);\t\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icon Gallery Grouped<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=767"}],"version-history":[{"count":71,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/767\/revisions"}],"predecessor-version":[{"id":7636,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/767\/revisions\/7636"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}