1<!DOCTYPE html> 2<html lang="zh" > 3<head> 4 <link rel="alternate" hreflang="zh" href="https://www.jcthplus.org/" /> 5 <link rel="alternate" hreflang="en" href="https://en.jcthplus.org/" /> 6 <link rel="alternate" hreflang="x-default" href="https://www.jcthplus.org/" /> 7 <meta charset="UTF-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 10 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> 11 <meta name="appleid-signin-client-id" content="com.labviso.jcthweb"> 12 <meta name="appleid-signin-scope" content="name email"> 13 <meta name="appleid-signin-redirect-uri" content="https://www.jcthplus.org"> 14 <meta name="appleid-signin-state" content="thisisastate"> 15 <meta name="appleid-signin-nonce" content="[NONCE]"> 16 <meta name="appleid-signin-use-popup" content="true"> <!-- or false defaults to false --> 17 <meta name="smartbanner:title" content="TourHeart+"> 18 <meta name="smartbanner:author" content="éç å¿çèè"> 19 <meta name="smartbanner:price" content="ç´è§£å£åãæé¬±ãç¦æ ®"> 20 <meta name="smartbanner:price-suffix-apple" content=""> 21 <meta name="smartbanner:price-suffix-google" content=""> 22 <meta name="smartbanner:icon-apple" content="/wp-content/uploads/2022/05/app-icon.png"> 23 <meta name="smartbanner:icon-google" content="/wp-content/uploads/2022/05/app-icon.png"> 24 <meta name="smartbanner:button" content="ä¸è¼"> 25 <meta name="smartbanner:button-url-apple" content="https://apps.apple.com/hk/app/%E8%B3%BD%E9%A6%AC%E6%9C%83%E5%BF%83%E5%B0%8E%E9%81%8A-%E8%A8%88%E5%8A%83/id1619066368"> 26 <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.labviso.jcthplus"> 27 <meta name="smartbanner:enabled-platforms" content="android,ios"> 28 <meta name="smartbanner:close-label" content=éé> 29 <meta name="smartbanner:custom-design-modifier" content="ios"> 30
30<script type="2ed2de0e287741bf6526c024-text/javascript">
vendor: 508 bytes, lines 30-43
30 31 (function(w, d, s, l, i) { 32 w[l] = w[l] || []; 33 w[l].push({ 34 'gtm.start': new Date().getTime(), 35 event: 'gtm.js' 36 }); 37 var f = d.getElementsByTagName(s)[0], 38 j = d.createElement(s), 39 dl = l != 'dataLayer' ? '&l=' + l : ''; 40 j.async = true; 41 j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; 42 f.parentNode.insertBefore(j, f); 43 })(window, document, 'script', 'dataLayer', '
43GTM-MPDL2WB
vendor: 12 bytes, lines 43-44
43'); 44
44window.dataLayer = window.dataLayer || []; 45 46 function gtag() { 47 dataLayer.push(arguments); 48 } 49 </script>
49 50
50<script type="2ed2de0e287741bf6526c024-text/javascript"> 51 function gaEvent(path, event, params) { 52 if (typeof(gtag) == "function") { 53 gtag('set', 'page_path', path); 54 if (params != null && typeof params === "object" && !Array.isArray(params)) { 55 gtag('event', event, params); 56 } else { 57 gtag('event', event); 58 } 59 } 60 } 61 </script>
61 62
62<script type="2ed2de0e287741bf6526c024-text/javascript"> 63 (function(c, l, a, r, i, t, y) { 64 c[a] = c[a] || function() { 65 (c[a].q = c[a].q || []).push(arguments) 66 }; 67 t = l.createElement(r); 68 t.async = 1; 69 t.src = "https://www.clarity.ms/tag/" + i; 70 y = l.getElementsByTagName(r)[0]; 71 y.parentNode.insertBefore(t, y); 72 })(window, document, "clarity", "script", "ritqzsfq98"); 73 </script>
73 74
74<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" type="2ed2de0e287741bf6526c024-text/javascript"></script>
74 75
75<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
75 76
76<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
76 77
77<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
77 78
78<script src="https://apis.google.com/js/api:client.js" defer type="2ed2de0e287741bf6526c024-text/javascript"></script>
78 79 <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/fontawesome.css" rel="stylesheet" /> 80 <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/brands.css" rel="stylesheet" /> 81 <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/solid.css" rel="stylesheet" /> 82 <link href="https://www.jcthplus.org/wp-content/themes/1.0/assets/fontawesome/css/regular.css" rel="stylesheet" /> 83 <link rel="preconnect" href="https://fonts.googleapis.com"> 84 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 85 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;600;700&family=Solway:wght@300;400;500;600;700" rel="stylesheet"> 86 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,FILL@24,0..1&display=block&icon_names=3p,account_tree,add_2,add_comment,arrow_back_ios_new,arrow_forward,arrow_forward_ios,attach_money,award_star,badge,bar_chart,bed,block,bookmark,bookmark_add,bookmark_added,border_color,calendar_add_on,calendar_clock,calendar_month,calendar_today,call,cancel,check,circle,close,contact_phone,content_copy,delete,dictionary,download,draw,edit,event_seat,group,heart_check,heart_plus,help,hotel,hourglass,ink_highlighter_move,key,list_alt_check,local_activity,location_on,lock,lock_open_right,mail,menu,menu_book,more_horiz,pause_circle,play_circle,radio_button_checked,radio_button_unchecked,remove,schedule,search,send,snooze,speed,task_alt,thumb_down,thumb_up,visibility,volume_down,volume_mute,volume_off,volume_up" rel="stylesheet"> 87 88 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> 89
89<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js" type="2ed2de0e287741bf6526c024-text/javascript"></script>
89 90 <link rel="canonical" href="https://www.jcthplus.org/">
vendor: 138 bytes, lines 90-92
90 91 <script src="https://www.google.com/recaptcha/api.js?hl=zh-HK" async defer type="2ed2de0e287741bf6526c024-text/javascript"></script> 92
92<script src="https://accounts.google.com/gsi/client" async defer type="2ed2de0e287741bf6526c024-text/javascript"></script>
92 93 <meta name="description" content=""> 94 <meta name="keyword" content=""> 95 <title>賽馬æå¿å°é+è¨å</title> 96 <meta name='robots' content='max-image-preview:large' /> 97<link rel='dns-prefetch' href='//cdn.jsdelivr.net' /> 98<link rel='dns-prefetch' href='//cdn.datatables.net' /> 99<style id="wp-img-auto-sizes-contain-inline-css"> 100img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} 101/*# sourceURL=wp-img-auto-sizes-contain-inline-css */ 102</style> 103<style id="wp-emoji-styles-inline-css"> 104 105 img.wp-smiley, img.emoji { 106 display: inline !important; 107 border: none !important; 108 box-shadow: none !important; 109 height: 1em !important; 110 width: 1em !important; 111 margin: 0 0.07em !important; 112 vertical-align: -0.1em !important; 113 background: none !important; 114 padding: 0 !important; 115 } 116/*# sourceURL=wp-emoji-styles-inline-css */ 117</style> 118<style id="wp-block-library-inline-css"> 119:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;
119--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} 120 121/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ 122</style> 123<style id="classic-theme-styles-inline-css"> 124/*! This file is auto-generated */ 125.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} 126/*# sourceURL=/wp-includes/css/classic-themes.min.css */ 127</style> 128 129 130<link rel='stylesheet' id='dataTables-css' href='https://cdn.datatables.net/v/bs5/moment-2.29.4/dt-2.3.5/datatables.min.css?ver=2.3.5' media='all' /> 131<link rel='stylesheet' id='tourheart-survey/cms/css/styles-css' href='https://www.jcthplus.org/wp-content/plugins/tourheart-survey/cms/css/styles.css?ver=1.0.0' media='all' /> 132<link rel='stylesheet' id='username-changer-css' href='https://www.jcthplus.org/wp-content/plugins/username-changer/assets/css/frontend.css?ver=3.3.0' media='all' /> 133<link rel='stylesheet' id='new_main.css-css' href='https://www.jcthplus.org/wp-content/themes/1.0/tailwindcss4/new-main-style.css?ver=1790225334' media='all' />
134<script id="chart-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js?ver=4.3.0" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 134
134
135<script id="dataTables-js" src="https://cdn.datatables.net/v/bs5/moment-2.29.4/dt-2.3.5/datatables.min.js?ver=2.3.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 135
135
136<script id="dataTables-absolute-js" src="https://cdn.datatables.net/plug-ins/2.3.5/sorting/absolute.js?ver=2.3.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 136
136
137<script id="jquery-core-js" src="https://www.jcthplus.org/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 137
137
138<script id="jquery-migrate-js" src="https://www.jcthplus.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 138
138
139<script data-wp-strategy="defer" defer id="main-js" src="https://www.jcthplus.org/wp-content/themes/1.0/js/main.js?ver=1757041995" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 139
139
140<script id="js-cookie-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js?ver=1.0.0" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 140
140
141<script id="t2cn-js" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/t2cn.js?ver=1.0.5" type="2ed2de0e287741bf6526c024-text/javascript"></script>
vendor: 1 bytes, line 141
141
142<script id="react-home-page-js-extra" type="2ed2de0e287741bf6526c024-text/javascript"> 143var phpData = {"lang":"zh","user_id":null,"email":null,"name":null,"site_url":"https://www.jcthplus.org"}; 144//# sourceURL=react-home-page-js-extra 145</script>
vendor: 1 bytes, line 145
145
146<script type="2ed2de0e287741bf6526c024-module" src="https://www.jcthplus.org/wp-content/themes/1.0/dist/react/homePage.js?ver=1790225334" id="react-home-page-js"></script>
146<link rel="https://api.w.org/" href="https://www.jcthplus.org/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.jcthplus.org/xmlrpc.php?rsd" /> 147<meta name="generator" content="WordPress 7.1" /> 148<link rel="icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-32x32.png" sizes="32x32" /> 149<link rel="icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-192x192.png" sizes="192x192" /> 150<link rel="apple-touch-icon" href="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-180x180.png" /> 151<meta name="msapplication-TileImage" content="https://media.jcthplus.org/wp-content/uploads/2025/11/03195931/cropped-Logo_icon-1-270x270.png" /> 152 153
153<script type="2ed2de0e287741bf6526c024-text/javascript">var _jf = _jf || [];_jf.push(['p','65383']);_jf.push(['initAction',true]);_jf.push(['_setFont','jf-jinxuanlatte-regular','css','.jf-jinxuanlatte-regular']);_jf.push(['_setFont','jf-jinxuanlatte-regular','alias','jf-jinxuanlatte']);_jf.push(['_setFont','jf-jinxuanlatte-regular','weight',400]);(function(A,p,c,m,l,q,r,h,B,D){var b=A._jf;if(b.constructor!==Object){var t=!0,u=function(a){var f=!0,e;for(e in b)b[e][0]==a&&(f&&(f=f&&!1!==b[e][1].call(b)),b[e]=null,delete b[e])},v=/\S+/g,w=/[\t\r\n\f]/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,n="".trim,x=n&&!n.call("\ufeff\u00a0")?function(a){return null==a?"":n.call(a)}:function(a){return null==a?"":(a+"").replace(C,"")},k=function(a){var f,b,g;if("string"===typeof a&&a&&(a=(a||"").match(v)||[],f=h[c]?(" "+h[c]+" ").replace(w," "):" ")){for(g=0;b=a[g++];)0>f.indexOf(" "+b+" ")&&(f+=b+" ");h[c]=x(f)}},d=function(a){var b,e,g;if(0===arguments.length||"string"===typeof a&&a){var d=(a||"").match(v)||[];if(b=h[c]?(" "+h[c]+" ").replace(w," "):""){for(g=0;e=d[g++];)for(;0<=b.indexOf(" "+e+" ");)b=b.replace(" "+e+" "," ");h[c]=a?x(b):""}}},y;b.addScript=y=function(b,f,e,g,d,c){d=d||function(){};c=c||function(){};var a=p.createElement("script"),h=p.getElementsByTagName("script")[0],k,m=!1,l=function(){a.src="";a.parentNode.removeChild(a);a=a.onerror=a.onload=a.onreadystatechange=null};g&&(k=setTimeout(function(){l();c()},g));a.type=f||"text/javascript";a.async=e;a.onload=a.onreadystatechange=function(b,c){m||a.readyState&&!/loaded|complete/.test(a.readyState)||(m=!0,g&&clearTimeout(k),l(),c||d())};a.onerror=function(a,b,d){g&&clearTimeout(k);l();c();return!0};a.src=b;h.parentNode.insertBefore(a,h)};for(var z in b)"initAction"==b[z][0]&&(t=b[z][1]);b.push(["_eventPreload",function(){1==t&&k(m);y(B,null,!1,3E3,null,function(){u("_eventInactived")})}]);b.push(["_eventReload",function(){d(r);d(q);k(l)}]);b.push(["_eventActived",function(){d(m);d(l);k(q)}]);b.push(["_eventInactived",function(){d(m);d(l);k(r)}]);u("_eventPreload")}})(this,this.document,"className","jf-loading","jf-reloading","jf-active","jf-inactive",this.document.getElementsByTagName("html")[0],"//ds.justfont.com/js/stable/v/6.1/id/441052665833");</script>
153 154 </head> 155 156<body class="flex flex-col font-NotoSansTC tracking-zh no-scrollbar min-h-screen" :class="scrollDisabled ? 'overflow-hidden' : ''" x-data="{scrollDisabled:false}" @disable-scroll.window="scrollDisabled=$event.detail" > 157 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPDL2WB" height="0" width="0" style="display:none; visibility:hidden"></noscript> 158
158<script type="2ed2de0e287741bf6526c024-text/javascript"> 159 function gaEvent(path, event, params) { 160 if (typeof(gtag) == "function") { 161 gtag('set', 'page_path', path); 162 if (params != null && typeof params === "object" && !Array.isArray(params)) { 163 gtag('event', event, params); 164 } else { 165 gtag('event', event); 166 } 167 } 168 } 169 </script>
169 170 <nav id="navigation" class="bg-white inset-x-0 z-30 shrink-0 collapsing" x-data="navInit"> 171 <div class="relative mx-4 new_sm:mx-10 new_lg:mx-8 z-10 h-24 flex flex-row items-center justify-between"> 172 <button type="button" id="btn-open-mobile-menu" class="w-6 h-6 z-10 flex items-center justify-center new_lg:hidden mr-8" aria-controls="mobile-menu" aria-expanded="false" @click="toggleMobileMenu"> 173 <span class="material-symbols-rounded text-new-secondary_brown_800 hover:text-new-primary_green_400 text-[32px]" x-text="isMobileMenuVisible ? 'close' : 'menu'"></span> 174 </button> 175 176 <div class="absolute inset-0 new_sm:relative flex new_sm:grow new_lg:grow-0 items-center sm:items-center justify-center new_sm:justify-start"> 177 <div class="shrink-0 flex items-center justify-center my-4"> 178 <a id="nav-logo-full" href="/"> 179 <img class="w-auto h-12" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/logo/JCTH-icon.png" alt="TourHeart+ icon large"> 180 </a> 181 <a id="nav-logo" href="/" class="hidden"> 182 <img class="w-auto h-[42px]" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/logo/JCTH-icon.png" alt="TourHeart+ icon small"> 183 </a> 184 </div> 185 </div> 186 187 <div class="hidden new_lg:flex grow flex-row items-stretch space-x-6 ml-6 h-full"> 188 <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown"> 189 <div class="h-full flex items-stretch"> 190 <a href="/about-us" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center"><span>éæ¼æå</span><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></a> 191 <div class="hover-indicator"></div> 192 </div> 193 194 <div x-show="open" class="sub-menu" x-collapse x-cloak> 195 <a href="/about-us#jcthplus-team" class="sub-menu-item">鿼平尿å</a> 196 <a href="/about-us#what-we-provide" class="sub-menu-item">å¹³å°å §å®¹</a> 197 <a href="/about-us#who-we-are" class="sub-menu-item">èªèæå</a> 198 <a href="/our-research" class="sub-menu-item">æåçç ç©¶</a> 199 </div> 200 </div> 201 202 <div class="relative menu-item"> 203 <div class="h-full flex items-stretch"> 204 <a href="/ai-mental-health-chatbot" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">èé¿æ¬è天</a> 205 <div class="hover-indicator"></div> 206 </div> 207 </div> 208 209 <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown"> 210 <div class="h-full flex items-stretch"> 211 <button class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center" @click="open = !open"><p class="text-left">èªå¸è³æº</p><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button> 212 <div class="hover-indicator"></div> 213 </div> 214 215 <div x-show="open" class="sub-menu" x-collapse x-cloak> 216 <a href="/courses" class="sub-menu-item">課å </a> 217 <a href="/exercises" class="sub-menu-item">ç·´ç¿</a> 218 <a href="/articles" class="sub-menu-item">æç« </a> 219 </div> 220 </div> 221 222 <div class="relative menu-item"> 223 <div class="h-full flex items-stretch"> 224 <a href="/events" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">æ´»å</a> 225 <div class="hover-indicator"></div> 226 </div> 227 </div> 228 229 <div class="relative menu-item"> 230 <div class="h-full flex items-stretch"> 231 <a href="https://antistigma.psy.cuhk.edu.hk/" target="_blank" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex py-[18px] items-center">廿±¡å乿 </a> 232 <div class="hover-indicator"></div> 233 </div> 234 </div> 235 236 <div class="relative menu-item" x-data="menuData" @mouseenter="openDropdown" @mouseleave="closeDropdown"> 237 <div class="h-full flex items-stretch"> 238 <a href="/for-student" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400 flex space-x-1 py-[18px] items-center"><p class="text-left">大å°çå°å</p><span class="w-4 h-4 shrink-0 flex items-center justify-center material-symbols-rounded text-base leading-none origin-center" :class="open ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></a> 239 <div class="hover-indicator"></div> 240 </div> 241 242 <div x-show="open" class="sub-menu" x-collapse x-cloak> 243 <a href="https://www.cityu.edu.hk/sds/cs/tourheart/" class="sub-menu
243-item" target="_blank">馿¸¯åå¸å¤§å¸</a> 244 <a href="/cuhk/" class="sub-menu-item" target="_blank">馿¸¯ä¸æå¤§å¸å¸çäºåèå¿çå¥åº·åè¼å°ä¸å¿</a> 245 <a href="https://sao.polyu.edu.hk/TourHeart/index_zh.asp" class="sub-menu-item" target="_blank">馿¸¯ç工大å¸</a> 246 <a href="https://counsel.hkust.edu.hk/tourheart/" class="sub-menu-item" target="_blank">馿¸¯ç§æå¤§å¸</a> 247 <a href="https://sso.cedars.hku.hk/tourHeart/" class="sub-menu-item" target="_blank">馿¸¯å¤§å¸å¸çç¼å±åè³æºä¸å¿</a> 248 <a href="https://tourheart.hkuspace.hku.hk/hkuspace-cc/zh" class="sub-menu-item" target="_blank">馿¸¯å¤§å¸é屬å¸é¢</a> 249 <a href="https://tourheart.hkuspace.hku.hk/hkuspace-ic/zh" class="sub-menu-item" target="_blank">馿¸¯å¤§å¸å°æ¥é²ä¿®å¸é¢åéå¸é¢</a> 250 <a href="https://tourheart.hkuspace.hku.hk/hpshcc/zh" class="sub-menu-item" target="_blank">馿¸¯å¤§å¸å°æ¥é²ä¿®å¸é¢ä¿è¯å±ä½é´»çç¤¾åæ¸é¢</a> 251 <a href="/hkbu-smc-sdc/" class="sub-menu-item" target="_blank">馿¸¯æµ¸æå¤§å¸ç³éæ ¡åå¸çç¼å±ä¸å¿</a> 252 <a href="/twc/" class="sub-menu-item" target="_blank">æ±è¯å¸é¢</a> 253 </div> 254 </div> 255 </div> 256 257 <div class="flex flex-row items-center z-10"> 258 <div class="flex flex-row items-center space-x-4"> 259 260 <div class="hidden new_sm:flex flex-row items-center"> 261 <a class="switch-cn-url text-new-primary_green_900 hover:text-new-primary_green_400 body_1">ç®</a> 262 <p class="w-6 body_1 text-center text-new-grey_300"> | </p> 263 <a class="switch-en-url hover:text-new-primary_green_400 text-new-primary_green_900 body_1">EN</a> 264 </div> 265 266 <a href="/login" class="auth-url hidden new_sm:block body_1 text-new-primary_green_900 hover:text-new-primary_green_400" aria-expanded="false" aria-haspopup="true">ç»å ¥</a> 267 <a href="/register" class="auth-url h-10 px-6 body_1 font-semibold text-white bg-new-primary_orange_900 rounded-full flex items-center justify-center hover:bg-new-primary_orange_900_hover" aria-expanded="false" aria-haspopup="true">註å<span class="hidden new_sm:inline-block w-6 material-symbols-rounded text-white text-2xl ml-2">arrow_forward</span></a> 268 </div> 269 </div> 270 </div> 271 272 <div class="fixed left-0 top-20 bottom-0 w-screen bg-background-yellow new_lg:hidden border-t border-new-secondary_brown_300 px-4 pt-6 pb-56 overflow-y-auto" id="mobile-menu" x-cloak x-show="isMobileMenuVisible" x-collapse x-data="{opened: null}"> 273 <div class="flex flex-row items-center pb-4 mb-6 new_sm:hidden"> 274 <a class="switch-cn-url text-new-primary_green_900 hover:text-new-primary_green_400 body_1">ç®</a> 275 <p class="w-6 body_1 text-center text-new-grey_300"> | </p> 276 <a class="switch-en-url hover:text-new-primary_green_400 text-new-primary_green_900 body_1">EN</a> 277 </div> 278 279 <div class="mb-6"> 280 <div class="flex flex-row items-center"> 281 <button class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center" @click="opened = opened === 1 ? null : 1">éæ¼æå<span class="w-5 h-5 shrink-0 flex items-center justify-center material-symbols-rounded text-lg sm:text-xl leading-none origin-center ml-3" :class="opened === 1 ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button> 282 </div> 283 284 <div x-show="opened === 1" class="pl-4 flex flex-col space-y-4 pt-4" x-collapse x-cloak> 285 <a href="/about-us" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">éæ¼ãå¿å°é+ã</a> 286 <a href="/about-us#jcthplus-team" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >鿼平尿å</a> 287 <a href="/about-us#what-we-provide" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >å¹³å°å §å®¹</a> 288 <a href="/about-us#who-we-are" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400" >èªèæå</a> 289 <a href="/our-research" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">æåçç ç©¶</a> 290 </div> 291 </div> 292 293 <a href="/ai-mental-health-chatbot" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">èé¿æ¬è天</a> 294 295 <div class="mb-6"> 296 <div class="flex flex-row items-center"> 297 <button class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center" @click="opened = opened === 3 ? null : 3">èªå¸è³æº<span class="w-5 h-5 shrink-0 flex items-center justify-center material-symbols-rounded text-lg sm:text-xl leading-none origin-center ml-3" :class="opened === 3 ? '-rotate-90' : 'rotate-90'">arrow_forward_ios</span></button> 298 </div> 299 300 <div x-show="opened === 3" class="pl-4 flex flex-col space-y-4 pt-4" x-collapse x-cloak> 301 <a href="/courses" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">課å </a> 302 <a href="/exercises" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">ç·´ç¿</a> 303 <a href="/articles" class="body_1 text-new-primary_green_900 hover:text-new-primary_green_400">æç« </a> 304 </div> 305 </div> 306 307 <a href="/events" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">æ´»å</a> 308 309 <a href="https://antistigma.psy.cuhk.edu.hk/" target="_blank" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center mb-6">廿±¡å乿 </a> 310 311 <a href="/for-student" class="title_1 font-jinxuanlatte text-new-primary_green_900 hover:text-new-primary_green_400 flex items-center">大å°çå°å</a> 312</div> 313</nav> 314
315<script type="2ed2de0e287741bf6526c024-text/javascript"> 316 $("#mobile-menu").css("top", "96px"); 317 318 window.onscroll = function() { 319 let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; 320 if (scrollTop >= 96) { 321 $("nav").addClass("sticky-nav"); 322 $("nav").css("top", Math.min(scrollTop - 192 , -16) + "px"); 323 324 $("#mobile-menu").css("top", Math.min(scrollTop - 96, 80) + "px"); 325 } else { 326 $("nav").removeClass("sticky-nav"); 327 $("nav").css("top", 0); 328 329 $("#mobile-menu").css("top", (96 - scrollTop) + "px"); 330 } 331 }; 332 333 document.addEventListener('alpine:init', () => { 334 Alpine.data('menuData', () => ({ 335 open: false, 336 openDropdown() { 337 this.open = true; 338 }, 339 closeDropdown() { 340 this.open = false; 341 } 342 })) 343 }); 344 345 $(".menu-item a").on("focus", function() { 346 const id = $(this).closest(".menu-item").attr("id"); 347 348 const showEvent = new Event(`show-mega-${id}`); 349 window.dispatchEvent(showEvent); 350 }); 351 352 $(".menu-item a").on("blur", function() { 353 setTimeout(() => { 354 if ($(".menu-item a:focus").length == 0) { 355 const hideEvent = new Event("hide-all-mega"); 356 window.dispatchEvent(hideEvent); 357 } 358 }, 100); 359 }); 360 361</script>
361 362 363 364
364<script type="2ed2de0e287741bf6526c024-text/javascript"> 365 document.fonts.load('1em "Material Symbols Rounded"').then(() => { 366 document.body.classList.add('material-symbols-loaded'); 367 }); 368 369 const lang = "zh_CHT"; 370 371 document.addEventListener('alpine:init', () => { 372 Alpine.data('navInit', () => ({ 373 userLoggedIn: false, 374 isProfileMenuVisible: false, 375 isProfileMobileMenuVisible: false, 376 isMobileMenuVisible: false, 377 isMobileUniversityMegaVisible: false, 378 toggleMobileMenu() { 379 this.isProfileMenuVisible = false; 380 this.isProfileMobileMenuVisible = false; 381 this.isMobileMenuVisible = !this.isMobileMenuVisible; 382 383 if (this.isMobileMenuVisible) { 384 $("body").css("overflow", "hidden"); 385 } else { 386 $("body").css("overflow", "auto"); 387 } 388 }, 389 toggleProfileMobileMenu() { 390 this.isMobileMenuVisible = false; 391 this.isProfileMobileMenuVisible = !this.isProfileMobileMenuVisible; 392 }, 393 showProfileMenu() { 394 this.isMobileMenuVisible = false; 395 this.isProfileMenuVisible = true; 396 }, 397 hideProfileMenu() { 398 this.isProfileMenuVisible = false 399 }, 400 toggleMobileUniversityMega() { 401 this.isMobileUniversityMegaVisible = !this.isMobileUniversityMegaVisible; 402 } 403 })); 404 }) 405 </script>
405 406 407<div id="react-page-root"> 408 <div class="flex items-center justify-center w-full grow py-20"> 409 <svg 410 class="animate-spin h-10 w-10 text-primary-green-600 mx-auto" 411 viewBox="0 0 24 24" 412 > 413 <circle 414 class="opacity-25" 415 cx="12" 416 cy="12" 417 r="10" 418 stroke="currentColor" 419 fill="transparent" 420 stroke-width="4" 421 ></circle> 422 <path 423 class="opacity-75" 424 fill="currentColor" 425 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" 426 ></path> 427 </svg> 428 </div> 429</div> 430
431<script type="2ed2de0e287741bf6526c024-text/javascript"> 432 const setScrollbarWidthVariable = () => { 433 const outer = document.createElement('div'); 434 outer.style.visibility = 'hidden'; 435 outer.style.overflow = 'scroll'; 436 outer.style.width = '100px'; 437 outer.style.height = '100px'; 438 439 document.body.appendChild(outer); 440 441 const scrollbarWidth = outer.offsetWidth - outer.clientWidth; 442 443 document.body.removeChild(outer); 444 445 document.documentElement.style.setProperty( 446 '--scrollbar-width', 447 `${scrollbarWidth}px` 448 ); 449} 450 451setScrollbarWidthVariable(); 452</script>
452 453 454 455<div x-data="chatbotData"> 456 <button class="fixed flex bottom-24 lg:bottom-8 right-8 rounded-full h-14 w-14 z-30 bg-primary-dark items-center justify-center shadow" @click.stop="openChatbotPanel()" x-cloak x-show="isEntranceVisible"> 457 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot_profile_new.png" alt="Chat with Boon widget" class="w-12 h-12"> 458 </button> 459 460 <div class="fixed inset-0 h-screen w-screen bg-gray-500/50 flex items-center justify-center z-100" x-cloak x-show="isChatbotPanelVisible" @start-chatbot.window="openChatbotPanel($event.detail.chatbot_id)"> 461 <div id="chatbot-panel" class="fixed inset-y-0 right-0 shadow-lg border-gray-500 w-full sm:w-144 z-50 bg-white flex flex-col items-stretch" @click.stop=""> 462 <div class="relative w-full h-full flex flex-col" x-show="isMessageSectionVisible"> 463 <div class="bg-primary h-18 flex items-center px-5 flex-shrink-0 z-30"> 464 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot_profile_new.png" class="h-14 w-14 mr-4" alt="Poon profile pic"> 465 <span class="text-white font-bold">é¿æ¬</span> 466 <div class="flex-grow"></div> 467 468 <button class="bg-white text-primary-darker rounded-full font-sm font-medium px-4 py-2 float-right cursor-pointer hover:bg-primary-lightest leading-normal" @click.stop="isTopicPanelVisible = true" tabIndex="1">話é¡</button> 469 <!-- <i class="fa-solid fa-magnifying-glass text-white text-xl pl-4 cursor-pointer"></i> --> 470 471 <button class="ml-4" tabIndex="1" @click.stop="checkNeedRating($dispatch)"> 472 <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-white.svg" alt="close" > 473 </button> 474 </div> 475 476 <div id="chat-messages" class="relative flex-grow overflow-y-scroll z-20" @scroll.self="handleScroll" x-ref="messages"> 477 <div class="fixed w-full sm:w-144 py-2 bg-module-box text-center text-sm transition-all duration-300 z-20" :class="isFavoritedMessageVisible ? 'top-18' : 'top-9'">å·²å å°ãæ¶è庫ã</div> 478 <div class="w-full mt-3 flex items-center justify-center" x-show="isLoadingHistory"> 479 <div id="chatbot-loader"></div> 480 </div> 481 <div class="flex flex-col items-stretch justify-end px-5 pb-3 min-h-full" tabIndex="1"> 482 <template x-for="message in messageList" :key="message.message_id"> 483 <div class="mt-3 clear-both"> 484 <template x-if="message.from=='chatbot' && message.content_type!='report'"> 485 <div class="items-center space-x-3 inline-flex bubble-container w-full"> 486 <div class="inline-block rounded-2xl rounded-tl-none text-sm text-content max-w-chatbot-bubble md:max-w-sm overflow-hidden" :class="[message.content_type=='image-url' || 'py-2.5 px-4', (message.chat_id == chatId) ? 'bg-primary-light' : 'bg-gray-100']"> 487 <div x-show="message.content_type=='text'" x-html="message.content_data"></div> 488 <div x-show="message.content_type=='image-url'" class="p-0"><image :src="(message.content_type=='image-url') ? message.content_data : ''"></div> 489 <div x-show="message.content_type=='audio-url'"> 490 <audio class="" controls :src="(message.content_type=='audio-url') ? message.content_data : ''" tabIndex="1"></audio> 491 </div> 492 <div x-show="message.content_type=='video-url'" class="chatbot-video-bubble"> 493 <div class="w-full aspect-w-16 aspect-h-16 md:aspect-h-9"> 494 <!-- <video controls ><soruce src="message.content_data">Your browser does not support the audio tag.</audio> --> 495 <iframe loading="lazy" :src="(message.content_type=='video-url') ? `${message.content_data}?modestbranding=1&rel=0` : ''" class="absolute inset-0 h-full video" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 496 </div> 497 </div> 498 </div> 499 <!-- <i class="fa-regular fa-copy bubble-action" x-show="message.content_type=='text'" @click="copyMessage(message.content_data)"></i>
499 --> 500 </div> 501 </template> 502 <template x-if="message.from=='chatbot' && message.content_type=='report'"> 503 <button class="inline-flex border rounded-full px-4 py-2 max-w-sm text-content border-gray-500 text-sm hover:border-primary hover:bg-primary hover:text-white items-center" @click="openReportPanel(message.content_data.report_id, message.content_data.report_time)"> 504 <span x-text="message.content_data.report_title"></span><i class="fa-solid fa-angle-right ml-2"></i> 505 </button> 506 </template> 507 <template x-if="message.from=='user'"> 508 <div class="inline-block float-right rounded-2xl rounded-tr-none text-sm py-2.5 px-4 text-content max-w-sm" :class="message.chat_id == chatId ? 'bg-chatbot-user' : 'bg-gray-100'" x-html="message.content_data"></div> 509 </template> 510 </div> 511 </template> 512 513 <div class="inputing" x-show="isInputingVisible"><span></span><span></span><span></span></div> 514 </div> 515 </div> 516 517 <div class="flex-shrink-0 w-full bottom-0 px-5 bg-gray-200 text-sm pb-4 sm:pb-0"> 518 <template x-if="expectedUserResponse?.reply_type=='text'"> 519 <div class="w-full flex flex-row items-stretch space-x-4 py-2"> 520 <div class="rounded-3xl bg-white border-none px-6 py-2 focus:outline-none" placeholder="write a message" id="chatbot-input-text" contenteditable="true" tabindex="-1" @input="userMessage = $event.target.textContent"></div> 521 <div class="flex items-end"> 522 <button @click="sendUserMessage()" :disabled="!userMessage"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button> 523 </div> 524 </div> 525 </template> 526 527 <template x-if="expectedUserResponse?.reply_type=='options'"> 528 <div class="w-full flex flex-row items-end space-x-4 py-2"> 529 <div class="chatbot-input-wrap rounded-2xl bg-white px-4"> 530 <template x-for="option in expectedUserResponse?.reply_content"> 531 <div class="flex flex-row items-center my-2 cursor-pointer" @click="userMessage = option" tabIndex="1" @keyup="selectOption(event, option)" :aria-label="`option - ${option}`"> 532 <div class="circle border rounded-full w-4 h-4 flex items-center justify-center" :class="(userMessage==null || userMessage==option) ? ('border-primary') : 'border-primary-lightest'"> 533 <div x-show="userMessage==option" class="bg-primary rounded-full w-2 h-2"></div> 534 </div> 535 <div class="flex-grow pl-2" :class="(userMessage && userMessage != option) ? 'text-gray-300' : 'text-content'" x-html="option"></div> 536 </div> 537 </template> 538 </div> 539 <button @click="sendUserMessage()" :disabled="!userMessage" tabIndex="1"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></i></button> 540 </div> 541 </template> 542 543 <template x-if="expectedUserResponse?.reply_type=='scale'"> 544 <div class="w-full flex flex-row items-stretch space-x-4 py-2"> 545 <div class="chatbot-input-wrap rounded-2xl bg-white p-4 pt-2 space-y-4 flex flex-col items-stretch justify-center"> 546 <div class="flex items-end justify-between"> 547 <span x-text="expectedUserResponse?.reply_setting.scale_setting.min.label[currentLang]"></span> 548 <span class="text-primary-dark font-medium text-sm font-jinxuanlatte inline-block h-6" x-text="userMessage"></span> 549 <span x-text="expectedUserResponse?.reply_setting.scale_setting.max.label[currentLang]"></span> 550 </div> 551 <input type="range" class="w-full" id="chatbot-slider" :min="expectedUserResponse?.reply_setting.scale_setting.min.value" :max="expectedUserResponse?.reply_setting.scale_setting.max.value" :step="expectedUserResponse?.reply_setting.scale_setting.step" x-model="userMessage"> 552 </div> 553 554 <div class="flex items-end"> 555 <button @click="sendUserMessage()" :disabled="!userMessage"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userMessage) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button> 556 </div> 557 </div> 558 </template> 559 560 <template x-if="expectedUserResponse?.reply_type=='multiple-options'"> 561 <div class="w-full flex flex-row items-end space-x-4 py-2"> 562 <div class="chatbot-input-wrap rounded-2xl bg-white px-4"> 563 <template x-for="(option, index) in expectedUserResponse?.reply_content"> 564 <div class="flex flex-row items-center my-2 cursor-pointer" @click="userMessage = option"> 565 <input type="checkbox" class="text-primary outline-none" x-model="userSelection[index]" :id="`multiple_option_${index}`"> 566 <label class="flex-grow pl-2 text-content" x-html="option" :for="`multiple_option_${index}`"></label> 567 </div> 568 </template> 569 </div> 570 <button @click="sendUserMessageMultipleOptions" :disabled="!userSelection.includes(true)"><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send${(userSelection.includes(true)) ? '' : '-disabled'}.svg`" alt="send" class="w-8 h-8 my-0.5"></button> 571 </div> 572 </template> 573 574 <template x-if="!expectedUserResponse"> 575 <div class="w-full flex flex-row items-center justify-end py-2"> 576 <button disabled><img :src="`https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/chatbot/chatbot-send-disabled.svg`" alt="send" class="w-8 h-8 my-0.5"></button> 577 </div> 578 </template> 579 580 </div> 581 </div> 582 583 <div class="absolute w-full h-full right-0 inset-y-0 flex flex-col z-30" x-show="isReportSectionVisible" x-transition:enter="transition ease-out duration-300" 584 x-transition:enter-start="opacity-0 scale-90" 585 x-transition:enter-end="opacity-100 scale-100" 586 x-transition:leave="transition ease-in duration-300" 587 x-transition:leave-start="opacity-100 scale-100" 588 x-transition:leave-end="opacity-0 scale-90"> 589 <div class="bg-primary h-18 flex items-center px-5 flex-shrink-0">
590 <span class="text-white cursor-pointer" @click="closeReportPanel"> 591 <i class="fa-solid fa-chevron-left mr-2"></i>ç¹¼çºå¾ 592 </span> 593 <div class="flex-grow"></div> 594 <!-- <span class="bg-primary-lightest text-primary-darker rounded-full font-sm font-medium px-4 py-2 float-right shadow cursor-pointer" @click.stop="isTopicPanelVisible = true">話é¡</span> --> 595 <!-- <i class="fa-solid fa-magnifying-glass text-white text-xl pl-4 cursor-pointer"></i> --> 596 </div> 597 598 <div class="bg-white flex-grow overflow-y-scroll px-5 flex flex-col items-stretch"> 599 <h5 class="text-primary-dark mt-5 mb-1" x-text="reportDetail?.report_title[currentLang]"></h5> 600 <p class="text-primary py-2"><i class="fa-solid fa-circle-check mr-2"></i>å·²å å°ãæçç·´ç¿ãè®ä½ 鍿æ°å¢æç¿»é±ç´é</p> 601 <div class="flex items-end justify-between mb-2"> 602 <span class="text-gray-400 text-xs" x-text="getDateTime(reportDetail?.timestamp)"></span> 603 <button class="text-primary disabled:opacity-0 disabled:cursor-default" :disabled="isReportEditable" @click="isReportEditable = true">ä¿®æ¹</button> 604 </div> 605 606 <template x-for="(question, index) in reportDetail?.report_content" :key="index"> 607 <div class="rounded-xl w-full mb-3 bg-primary-lightest flex flex-col p-4" x-data="{enableEditor: false}"> 608 <div class="text-primary-darker font-bold flex-grow" x-text="`${index + 1}. ${question.question[currentLang]}`"></div> 609 <hr class="my-2 border-primary-dark"> 610 <div class="text-content text-sm" x-text="question.answer" x-show="!isReportEditable"></div> 611 <textarea class="text-content text-sm border-0 bg-transparent outline-none focus:outline-none bg-white rounded" :disabled="!isReportEditable" x-show="isReportEditable" rows="5" x-model="question.answer"></textarea> 612 </div> 613 </template> 614 615 <div class="text-center pt-4 pb-6" x-cloak> 616 <button class="rounded-full px-6 py-1 bg-primary-dark text-white mx-atuo hover:bg-primary" x-show="isReportEditable" @click="saveReport()">ä¿å</button> 617 </div> 618 </div> 619 620 </div> 621 </div> 622 623 <!-- Topic panel --> 624 <div class="fixed inset-y-0 right-0 xl:right-144 shadow-lg border-gray-500 w-full sm:w-144 z-50 xl:z-0 bg-white flex flex-col items-stretch overflow-y-auto transition" style="background-color:#fcf5eb" x-show="isTopicPanelVisible" x-transition:enter="transition ease-linear duration-300" 625 x-transition:enter-start="translate-x-full" 626 x-transition:enter-end="translate-x-0" 627 x-transition:leave="transition ease-linear duration-300" 628 x-transition:leave-start="translate-x-0" 629 x-transition:leave-end="translate-x-full"> 630 <button class="absolute ml-4 top-6 right-6" @click.stop="isTopicPanelVisible=false" tabIndex="1"> 631 <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-gray.svg" alt="close"> 632 </button> 633 634 <div class="flex flex-row flex-wrap pl-6 pr-12 my-6 gap-3"> 635 <button class="rounded-full shadow inline-block font-normal text-sm py-2 px-5 min-w-20 text-center" :class="selectedTopicId ? 'bg-white text-content hover:bg-primary-light cursor-pointer' : 'bg-primary text-white'" @click="selectTopic()" tabIndex="1">å ¨é¨</button> 636 <template x-for="topic in topics"> 637 <button class="rounded-full shadow inline-block font-normal text-sm py-2 px-5 min-w-20 text-center" :class="selectedTopicId==topic.topic_id ? 'bg-primary text-white' : 'bg-white text-content hover:bg-primary-light cursor-pointer'" x-text="topic.zh" @click="selectTopic(topic.topic_id)" tabIndex="1"></button> 638 </template> 639 </div> 640 641 <div class="inset-0 flex flex-col space-y-4 px-6 flex-grow mb-6"> 642 <template x-for="chatbot in selectedTopicId ? chatbots.filter(c => topics.find(t => t.topic_id == selectedTopicId).chatbots.includes(c.chatbot_id)) : chatbots"> 643 <button class="w-full bg-white rounded-3xl shadow flex flex-row items-stretch overflow-hidden cursor-pointer image-card" @click.stop="showChatbotDetail(chatbot)" :key="chatbot.chatbot_id" tabIndex="1"> 644 <div class="topic-thumbnail-container flex-shrink-0 overflow-hidden"> 645 <img loading="lazy" class="w-full h-full object-center object-cover hover-scale" :src="chatbot.settings.thumbnail" alt="chatbot image"> 646 </div> 647 <div class="flex-grow py-6 px-4 sm:px-6 flex flex-col items-start justify-between bg-white"> 648 <!-- <div class="rounded-full bg-primary inline-block font-normal text-xs py-1 px-4 min-w-20 text-center text-white" x-text="getTopicName(chatbot.topic_id)"></div> --> 649 <p class="line-clamp-2 font-jinxuanlatte text-content" x-text="chatbot.settings.title.zh"></p> 650 <p class="text-primary text-sm font-bold hover:text-primary-dark">äºè§£æ´å¤</p> 651 </div> 652 </button> 653 </template> 654 </div> 655 </div> 656 657 <template x-if="selectedChatbot"> 658 <div class="fixed inset-y-0 right-0 xl:right-144 shadow-lg border-gray-500 w-full sm:w-144 z-50 xl:z-0 bg-white flex flex-col items-stretch overflow-y-auto transition" @click.stop="" style="background-color:#fcf5eb" x-show="isChatbotDetailPanelVisible"> 659 660 <div class="w-full relative"> 661 <img loading="lazy" class="w-full h-auto" :src="selectedChatbot.settings.cover_image" :alt="`chatbot image - ${selectedChatbot.settings.title.zh}`"> 662 <button class="absolute top-6 left-6" @click="isChatbotDetailPanelVisible=false" tabIndex="1"> 663 <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/back.svg" alt="back"> 664 </button> 665 <button class="absolute top-6 right-6" @click.stop="isChatbotDetailPanelVisible=false;isTopicPanelVisible=false" tabIndex="1"> 666 <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-white.svg" alt="close"> 667 </button> 668 </div> 669 <div class="px-6 py-10 sm:py-14 sm:px-10"> 670 <p class="text-lg font-jinxuanlatte text-primary-darkest" x-text="selectedChatbot.settings.title.zh"></p> 671 <p class="text-content text-sm mt-4" x-text="selectedChatbot.settings.description.zh"></p> 672 <div class="mt-10 text-center"> 673 <button class="bg-start text-white rounded-full py-2 px-6 mx-auto hover:bg-start-dark" @click.stop="startChatbot(selectedChatbot.chatbot_id)" tabIndex="1">åé¿æ¬å¾å</button> 674 </div> 675 </div> 676 </div> 677 </template> 678 679 680 <!-- rating panel --> 681 <div class="fixed inset-y-0 right-0 shadow-lg border-gray-500 w-full sm:w-144 z-50 bg-white flex flex-col items-stretch justify-center h-screen" x-show="isChatbotRatingPanelVisible"> 682 <div class="flex items-center justify-between px-5 flex-shrink-0 max-h-full overflow-auto py-6"> 683 <button class="text-primary flex-shrink-0" @click="resetChatbotRating()" tabIndex="1"> 684 <i class="fa-solid fa-chevron-left mr-2"></i> 685 è¿åå°è©± 686 </button> 687 688 <button class="ml-4" @click.stop="closeChatbotPanel($dispatch)" tabIndex="1"> 689 <img class="w-5 h-5" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-gray.svg" alt="close"> 690 </button> 691 </div> 692 <div class="flex-grow flex flex-col items-center justify-center flex-shrink-0 pb-12" x-show="ratingIndex == 1"> 693 <img class="h-64 w-64" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/chatbot/rating.png" alt="rating"> 694 <div class="mt-12 font-medium text-content">
694ä½ æå¹¾æ»¿æå¢æ¬¡å°è©±ï¼</div> 695 <div class="flex mt-8"> 696 <template x-for="i in 5"> 697 <button class="fill-current flex-shrink-0 text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('overall', i)"> 698 <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.overall >= i ? 'currentColor' : 'transparent'" stroke="currentColor"> 699 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 700 </svg> 701 </button> 702 </template> 703 </div> 704 </div> 705 706 <div class="flex-grow flex flex-col items-center justify-center flex-shrink-0 pb-12" x-show="ratingIndex == 2" x-transition:enter.opacity> 707 <div class="text-xl text-content font-jinxuanlatte">墿¬¡åé¿æ¬å¾å®ä¹å¾ï¼ä½ æåâ¯â¯</div> 708 709 <div class="mt-6 font-medium text-content">æ´é¡æå»å¾èªå·±å çæ³ï¼</div> 710 <div class="flex mt-2"> 711 <template x-for="i in 5"> 712 <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('willing_to_share', i)"> 713 <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.willing_to_share >= i ? 'currentColor' : 'transparent'" stroke="currentColor"> 714 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 715 </svg> 716 </button> 717 </template> 718 </div> 719 720 <div class="mt-6 font-medium text-content">æ´å æ³åºæ¥å¸¸çæ´»ä¸ä»¥è¡å廿¹åèªå·±å æ æ³ï¼</div> 721 <div class="flex mt-2"> 722 <template x-for="i in 5"> 723 <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('willing_to_try', i)"> 724 <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.willing_to_try >= i ? 'currentColor' : 'transparent'" stroke="currentColor"> 725 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 726 </svg> 727 </button> 728 </template> 729 </div> 730 731 <div class="mt-6 font-medium text-content">è¦ºå¾æå¹«å°èªå·±å å¿çå¥åº·ï¼</div> 732 <div class="flex mt-2"> 733 <template x-for="i in 5"> 734 <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('can_help', i)"> 735 <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.can_help >= i ? 'currentColor' : 'transparent'" stroke="currentColor"> 736 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 737 </svg> 738 </button> 739 </template> 740 </div> 741 742 <div class="mt-6 font-medium text-content">äºè§£å¤åé»ç §é¡§èªå·±å å¿çå¥åº·ï¼</div> 743 <div class="flex mt-2"> 744 <template x-for="i in 5"> 745 <button class="fill-current text-primary p-1 w-12 m-0 cursor-pointer" tabIndex="1" @click="rate('understand_more', i)"> 746 <svg class="w-15 transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :fill="chatbotRating.understand_more >= i ? 'currentColor' : 'transparent'" stroke="currentColor"> 747 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /> 748 </svg> 749 </button> 750 </template> 751 </div> 752 753 <button class="mt-8 rounded-full bg-primary py-2 px-8 text-white hover:bg-primary-darker" tabIndex="1" @click="submitRating()">æäº¤</button> 754 </div> 755 756 <div class="flex-grow flex flex-col items-center" x-show="ratingIndex == 3"> 757 <div class="text-xl text-content font-jinxuanlatte">æè¬ä½ ç寶貴åæï¼</div> 758 <button class="mt-16 rounded-full bg-primary py-2 px-12 text-white hover:bg-primary-darker" tabIndex="1" @click="closeChatbotPanel($dispatch)">好</button> 759 </div> 760 </div> 761 </div> 762</div> 763
764<script type="2ed2de0e287741bf6526c024-text/javascript"> 765document.addEventListener('alpine:init', () => { 766 Alpine.data('chatbotData', () => ({ 767 isEntranceVisible: false, 768 isChatbotPanelVisible: false, 769 isMessageSectionVisible: false, 770 isInputingVisible: true, 771 isReportSectionVisible: false, 772 isTopicPanelVisible: false, 773 isChatbotDetailPanelVisible: false, 774 isChatbotRatingPanelVisible: false, 775 isFavoritedMessageVisible: false, 776 isLoadingHistory: false, 777 lastScrollPos: 0, 778 messageList: [], 779 reportDetail: null, 780 defaultChatbotId: 143, 781 immediateHelpChatbotId: 159, 782 chatbotId: null, 783 chatId: null, 784 chatMessageDelay: 1500, 785 expectedUserResponse: null, 786 userMessage: null, 787 userSelection: [], 788 openedReportID: null, 789 currentLang: "zh-CHT", 790 restartChatbot: true, 791 selectedChatbot: null, 792 selectedTopicId: null, 793 chatbotRating: { 794 overall: 0, 795 willing_to_share: 0, 796 willing_to_try: 0, 797 can_help: 0, 798 understand_more: 0, 799 }, 800 user_level: 0, 801 ratingIndex: 1, 802 newChat: true, 803 isReportEditable: false, 804 topics: [{"chatbots":["103","133","146","149","147"],"cn":"èåºå¿çå¥åº·","en":"Workplace Mental Health","zh":"è·å ´å¿çå¥åº·","topic_id":"28"},{"chatbots":["107"],"cn":"ä¸èµ·æå»æ ç¾","en":"Labels & Stigmas","zh":"ä¸èµ·æå»æ¨ç±¤","topic_id":"30"},{"chatbots":["104","109","111","139"],"cn":"èªææ¢ç´¢ä¹æ ","en":"Self-Discovery","zh":"èªææ¢ç´¢ä¹æ ","topic_id":"25"},{"chatbots":["108","111","112","124","125","105","148","168"],"cn":"èµ°è¿æ 绪ä¸èº«ä½","en":"Body & Mind","zh":"èµ°é²æ ç·è身é«","topic_id":"27"},{"chatbots":["232"],"cn":"ç©¿è¶æ äºå²","en":"Journey across the Storyland","zh":"ç©¿è¶æ äºå³¶","topic_id":"2530"},{"chatbots":["123","103","99","106","133"],"cn":"人é å ³ç³»","en":"Relationship","zh":"人ééä¿","topic_id":"29"},{"chatbots":["109","110","149","147","148","168"],"cn":"æ¥å¸¸å¿ç嵿¤","en":"Mental Self-Care","zh":"æ¥å¸¸å¿çåµè·","topic_id":"26"}], 805 chatbots: [{"chatbot_id":"105","name":"Lv1\/2 Chatbot_ç¼å å ç天å é»ç®ï¼","description":"ç¼å å ç天å é»ç®ï¼","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/06_Count-Sheep-Throughout-the-Night.webp","description":{"cn":"失ç ä»¤äººå¥½å°æ°ï¼æ ¹æ®ä¸å¤§ä¸é¡¹è°æ¥ï¼æ¯10ä¸ªé¦æ¸¯äººå°±æ7个éå°å¤±ç é®é¢ï¼å¯è§ç³»é½å¸äººæ®ééå°å é®é¢ãç©¶ç«å¯ä»¥ç¹å失ç å ±å¤å¢ï¼ ","en":"Insomnia can be so frustrating! According to a CUHK study, 7 out of 10 HK residents experience insomnia, demonstrating its widespreadness. How do we live with insomnia?","zh":"失ç ä»¤äººå¥½å°æ¾ï¼æ ¹æä¸å¤§ä¸é 調æ¥ï¼æ¯10å馿¸¯äººå°±æ7åéå°å¤±ç åé¡ï¼å¯è¦ä¿é½å¸äººæ®ééå°å åé¡ãç©¶ç«å¯ä»¥é»å失ç å ±èå¢ï¼ "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/06_Count-Sheep-Throughout-the-Night.webp","title":{"cn":"ç¼å å ç天å ...ç¹ç®ï¼","en":"Hate Counting Sheep Throughout the Night?","zh":"ç¼å å ç天å ...é»ç®ï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-14 08:27:09","user_id":"5"},{"chatbot_id":"112","name":"Lv1\/2 Chatbot_èª¿ç¯æ ç· ãABC PLEASEã","description":"èª¿ç¯æ ç· ãABC PLEASEã","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/14_Emotion-Regulation-ABC-PLEASE-1.webp","description":{"cn":"å¼ºçæ ç»ªååºä¸ºäººå¸¦æ¥åå°å°æ°ãä¸é½ç»ä¹ è°èæ ç»ªå æå·§ï¼å¦ä¹ ç´¯ç§¯ç§¯ææ ç»ªã建ç«èªæææ§ãå颿©åºå¯¹æ æ¯ã","en":"Strong emotional reactions can be quite troublesome. Let\u0027s practice some emotion regulation skills, learn to accumulate positive emotions, build mastery, and cope ahead of emotion-arousing situations. ","zh":"å¼·çæ ç·åæçºäººå¸¶ä¾åå°å°æ¾ãä¸é½ç·´ç¿èª¿ç¯æ ç·å æå·§ï¼å¸ç¿ç´¯ç©ç©æ¥µæ ç·ã建ç«èªæææ§ãåé æ©æå°æ æ¯ã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/14_Emotion-Regulation-ABC-PLEASE-1.webp","title":{"cn":"è°èæ 绪 âABC PLEASEâ","en":"Emotion Regulation with âABC PLEASEâ","zh":"èª¿ç¯æ ç· ãABC PLEASEã"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 12:38:34","user_id":"5"}
805,{"chatbot_id":"232","name":"Storytaler Audio Story","description":"bot for storytaler audio story","settings":{"cover_image":"\/wp-content\/uploads\/2023\/08\/audio_mini_page.webp","description":{"cn":"å¨è¿ä¸ªæ
äºå²ä¸ï¼è¯´ä¹¦äººä¼ä»¥å£°é³å¯¼èªï¼å¸¦ä½ ç©¿è¶åç§é£æ¯ï¼éç°ä»ä»¬èµ°è¿çè·¯ãä¸å飿¯ï¼ä»£è¡¨ä¸åæ
绪ï¼è®²è¿°çæ¯çæ´»çé«ä½èµ·è·ï¼åæåä¹ãè¯éä½ å±å¼æ¢è®¿ä¹æ
ï¼å¨æ
äºå²ä¸æ¾å°å
±é¸£ã","en":"","zh":"å¨éåæ
äºå³¶ä¸ï¼èªªæ¸äººæä»¥è²é³å°èªï¼å¸¶ä½ ç©¿è¶å種風æ¯ï¼éç¾ä»åèµ°éçè·¯ãä¸å風æ¯ï¼ä»£è¡¨ä¸åæ
ç·ï¼è¬è¿°çæ¯çæ´»çé«ä½èµ·è·ï¼åæåæ¨ãèª éä½ å±éæ¢è¨ªä¹æ
ï¼å¨æ
äºå³¶ä¸æ¾å°å
±é³´ã"},"thumbnail":"\/wp-content\/uploads\/2023\/08\/audio_mini_page.webp","title":{"cn":"ç©¿è¶æ
äºå²","en":"Journey across the Storyland (Chinese version only)","zh":"ç©¿è¶æ
äºå³¶"}},"is_default":"0","is_start_directly":"1","create_timestamp":"2023-08-07 04:21:02","user_id":"5"},{"chatbot_id":"107","name":"Lv1\/2 Chatbot_å°ææ±¡åèæ¨ç±¤","description":"å°ææ±¡åèæ¨ç±¤","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/11_Fighting-Stigma-and-Labelling.webp","description":{"cn":"æç²¾ç¥ç
å
人æ¿å社ä¼å¯¹ä½¢åå
æ ç¾åæ§è§ãç似忶æå
åå¥ï¼å¯è½å·²ç»éå«çè´¬ææå³ãå¯¹ææ±¡åï¼å¯ä»¥ç±äºè§£å¼å§ï¼ç§¯å°æå¤ï¼ç¸ä¿¡ä¼æ¨å¨å°ç¤¾ä¼æ¹åã","en":"People with mental illness are often being stigmatized and discriminated against in the society. Although generally used without malice, our choice of words and use of labels contain derogatory implications. We can end stigma by first seeking to understand. Little by little, we can impact change at the societal level. ","zh":"æç²¾ç¥ç
å
人æ¿å社æå°ä½¢åå
æ¨ç±¤åæ§è¦ãç似忡æå
åå¥ï¼å¯è½å·²ç¶é±å«èè²¶ææå³ãå°ææ±¡åï¼å¯ä»¥ç±äºè§£éå§ï¼ç©å°æå¤ï¼ç¸ä¿¡ææ¨åå°ç¤¾ææ¹è®ã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/11_Fighting-Stigma-and-Labelling.webp","title":{"cn":"å¯¹ææ±¡å䏿 ç¾","en":"Fighting Stigma and Labelling ","zh":"å°ææ±¡åèæ¨ç±¤"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 06:43:42","user_id":"5"},{"chatbot_id":"103","name":"Lv1\/2 Chatbot_ææ¯æè¦æhurtå°äºº?","description":"ææ¯æè¦æhurtå°äºº?","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/02_How-to-Give-Advice.webp","description":{"cn":"æåºæè§æ¶ï¼æææ¬çåæï¼ç¹è§£å¯¹æ¹å´å¬²åï¼åæ¥æåºæè§æ¶å
è¯æ°ãå
容ãåºåççï¼é½æååæå·§å¯ä»¥å¦ä¹ ï¼å¸®å©æå以æ´ä½è´´æ¹å¼ååºå¯¹æ¹éè¦ã ","en":"Why do people get mad at us even when we offered our advice with genuinely good intentions? Turns out, there are skills we can learn (tone, content, context, etc.) which could help us to sensitively and considerately respond to others\u0027 needs. ","zh":"æåºæè¦æï¼æææ¬èåæï¼é»è§£å°æ¹å»å¬²åï¼åä¾æåºæè¦æå
èªæ°£ãå
§å®¹ãå ´åççï¼é½æååæå·§å¯ä»¥å¸ç¿ï¼å¹«å©æå以æ´é«è²¼æ¹å¼åæå°æ¹éè¦ã "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/02_How-to-Give-Advice.webp","title":{"cn":"ææ¯æè§ä¼hurtå°äººï¼","en":"Worried that Giving Advice Would Hurt Othersâ Feelings?","zh":"ææ¯æè¦æhurtå°äººï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-11 16:08:28","user_id":"5"},{"chatbot_id":"133","name":"Lv1\/2 Chatbot_é¢å°æ¹è©","description":"Lv1\/2 Chatbot_é¢å°æ¹è©","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/18_Facing-Criticism.webp","description":{"cn":"åå°æ¹è¯ï¼æ
绪好æè¢«çµå¼ï¼ååºèµ°å两个æç«¯ï¼å
¨çæ¥åæè
ä¸ä¸å¦å®ãæåå¯ä»¥ç¹çè§£åè¿æ»¤æ¹è¯ï¼ååºæ¹å¼åæåº¦åæå©éæ©ï¼","en":"Nothing triggers our emotions as easily as criticism does. We tend to give polar responses - total acceptance or total rejection. How can we better comprehend and filter through criticism? What choices do we have in our responses and attitudes? ","zh":"åå°æ¹è©ï¼æ
ç·å¥½æè¢«ç½å¼ï¼åæèµ°åå
©å極端ï¼å
¨ç¤æ¥åæè
ä¸ä¸å¦å®ãæåå¯ä»¥é»çè§£åéæ¿¾æ¹è©ï¼åææ¹å¼åæ
度åæå©é¸æï¼"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/18_Facing-Criticism.webp","title":{"cn":"é¢å¯¹æ¹è¯","en":"Facing Criticism ","zh":"é¢å°æ¹è©"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-09-02 07:15:50","user_id":"5"},{"chatbot_id":"146","name":"Lv1\/2_份工åå°ååç®","description":"Lv1\/2_份工åå°ååç®","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/19_Burnout-at-Work.webp","description":{"cn":"çªå·¥çªå°é¢é¢åï¼åæå¨åï¼äº²ç±çï¼ä½ å¹¶åå¤åãéè¿åæ¸
ä¹å¢å½±åå·¥ä½å¨åï¼äºè§£ä¸ä¸é®é¢æå¨ï¼ä»èæ·±æå·¥ä½å¯¹ä½ å
æä¹å~~","en":"Feeling unmotivated at work? My dear, you are not alone. Through clarifying what affects your work motivation, you may understand the underlying issues, and reflect on your meaning at work.","zh":"çªå·¥çªå°é ¹é ¹åï¼åæååï¼è¦ªæçï¼ä½ 並åå¤å®ãéé鿏
ä¹å¢å½±é¿å·¥ä½ååï¼äºè§£ä¸ä¸å顿å¨ï¼å¾èæ·±æå·¥ä½å°ä½ å
æç¾©å~~"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/19_Burnout-at-Work.webp","title":{"cn":"份工åå°ååç¾","en":"So Not Enthused about Work...","zh":"份工åå°ååç®"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 13:06:23","user_id":"5"},{"chatbot_id":"149","name":"Lv1\/2 Chatbot_éå¡åæå£åå
ç¿æ
£","description":"Lv1\/2 Chatbot_éå¡åæå£åå
ç¿æ
£","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/23_Stress-Response-Practice.webp","description":{"cn":"ä½ æååï¼ææååï¼åæååæ¶ï¼ä½ ç³»ç¹ååºå¢ï¼\r\næ¯ä¸ªäººé½æååä¹ æ¯å»ååºååãæå²æç¥åå¥åº·ï¼ä½åæ§å¶åå°ï¼åç¸å½¢ææ¶æ§å¾ªç¯ãæ³åæ³è°æ´å¤é项æ¯èªå·±ï¼æ´çµæ´»åå¥åº·å°ååºååå¢ï¼ä¸é½å¾ååï¼","en":"Iâm stressed and youâre stressed. So how do you manage your stress? We all c
805ope with stress differently. Sometimes, we feel out of control and cope with stress in unhealthy ways, trapping us in a vicious cycle. Do you want to provide yourself with more options, responding to stress in a more flexible and healthy ways? Letâs talk about it.","zh":"ä½ æå£åï¼ææå£åï¼åæå£åæï¼ä½ ä¿é»åæå¢ï¼\r\næ¯åäººé½æååç¿æ
£å»åæå£åãæå²æç¥åå¥åº·ï¼ä½åæ§å¶åå°ï¼è®ç¸å½¢ææ¡æ§å¾ªç°ãæ³åæ³è«æ´å¤é¸é
æ¯èªå·±ï¼æ´éæ´»åå¥åº·å°åæå£åå¢ï¼ä¸é½å¾ååï¼"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/23_Stress-Response-Practice.webp","title":{"cn":"éå¡ååºååå
ä¹ æ¯","en":"Reshaping Our Response to Stress","zh":"éå¡åæå£åå
ç¿æ
£"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-16 07:30:08","user_id":"5"},{"chatbot_id":"147","name":"Lv1\/2 Chatbot_å£åä¿ååå®é»åï¼","description":"å£åä¿ååå®é»åï¼","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/20_Motivated-by-Stress.webp","description":{"cn":"åå好似好å¾äººæï¼å¤§å®¶è§å°é½æ³æå¤´èµ°ãä½é度åååå¯ä»¥æä¸ºæ¨å¨åï¼å¸®æååé¾åº¦ææï¼ç©¶ç«ååç³»ä¹ä¸ä¸å¢ï¼ä½¢åç¹é©±ä½¿äººæååååºå¢ï¼å
¥åå¾åã","en":"Stress may seem scary; we all want to turn our heads away from it. However, optimal level of stress can be a source of motivation, encouraging us to prevail over challenge. So what exactly is stress? How does it lead to different responses in people? Come chat with meâ¦","zh":"å£å好似好å¾äººé©ï¼å¤§å®¶è¦å°é½æ³æé èµ°ãä½é©åº¦å£ååå¯ä»¥æçºæ¨ååï¼å¹«æååé£åº¦ææ°ï¼ç©¶ç«å£åä¿ä¹æ±æ±å¢ï¼ä½¢åé»é©
使人æåååæå¢ï¼å
¥åå¾åã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/20_Motivated-by-Stress.webp","title":{"cn":"ååç³»å¨åå®é»åï¼","en":"Stress - Motivator or Obstacle","zh":"å£åä¿ååå®é»åï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 16:35:11","user_id":"5"},{"chatbot_id":"104","name":"Lv1\/2 Chatbot_ä½ éç·æ³éå
çæ´»åï¼","description":"ä½ éç·æ³éå
çæ´»åï¼","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/01_Living-the-Life-You-Want.webp","description":{"cn":"好å¤äººé½å¯¹çæ´»å
æ»¡ä½æ³ååææï¼ä½ å¿ä¸å
çæ³çæ´»åæ¯ç¹å¢ï¼å¦æä½ æ³çè¯ï¼è¯åä¸é½è®¢ç«ç®æ ï¼å¹¶è®¡åè¡å¨ï¼å°ç®æ å®è·µåºæ¥ï¼ä¸ºè¿åçæ³çæ´»åªåã ","en":"Many people have hopes and dreams for their lives. What does your \"ideal life\" look like? If you are interested, let\u0027s set some goals and courses of action and work together to live them out and move towards the ideal life! ","zh":"好å¤äººé½å°çæ´»å
æ»¿ä½æ³ååææï¼ä½ å¿ä¸å
çæ³çæ´»åæ¯é»å¢ï¼å¦æä½ æ³ç話ï¼è©¦åä¸é½è¨ç«ç®æ¨ï¼ä¸¦è¨åè¡åï¼å°ç®æ¨å¯¦è¸åºä¾ï¼çºéåçæ³çæ´»åªåã "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/01_Living-the-Life-You-Want.webp","title":{"cn":"ä½ è¿ç´§æ³è¿å
çæ´»åï¼","en":"Are You Living the Life You Want to Live?","zh":"ä½ éç·æ³éå
çæ´»åï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-13 13:47:04","user_id":"18"},{"chatbot_id":"109","name":"Lv1\/2 Chatbot_å¤ç¨ VS ä¸äººä¹å¢","description":"å¤ç¨ VS ä¸äººä¹å¢","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/10_Loneliness-vs-Solitude.webp","description":{"cn":"å¤ç¬æå¥½æ®éï¼ç³»å 乿¯ä¸ªäººé½ç»åè¿å
æåãå¦ä¹ é¢å¯¹å¤ç¬æï¼æ¾ä¸ä¸ªèº«å¿å¾ä»¥å®é¡¿ä¹å¤ã","en":"Loneliness is a ubiquitous human emotion. Here, we explore whether it is possible to be alone but not lonely, learning to face loneliness and finding an internal haven to settle the body and mind. ","zh":"å¤ç¨æå¥½æ®éï¼ä¿å¹¾ä¹æ¯å人é½ç¶æ·éå
æåãå¸ç¿é¢å°å¤ç¨æï¼æµä¸å身å¿å¾ä»¥å®é ä¹èã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/10_Loneliness-vs-Solitude.webp","title":{"cn":"å¤ç¬ vs. ä¸äººä¹å¢","en":"Loneliness vs. Solitude","zh":"å¤ç¨ vs. ä¸äººä¹å¢"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:35:26","user_id":"5"}
805,{"chatbot_id":"111","name":"Lv1\/2 Chatbot_è¬åéè§ âãä½ åºéåï¼ã","description":"è¬åéè§ âãä½ åºéåï¼ã","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/15_Mindfulness-Where-are-You.webp","description":{"cn":"çæ´»ä¸ï¼æåå¥½ä¹ æ¯å¯å¨âèªå¨å¯¼èªâ模å¼ï¼ä¸ç¥ä¸è§å¯¹å¤çäºç©ä½åºååºï¼åèåçæèªå·±èº«ä½ãæ
ç»ªãææ³å
ç¶æãä¸é½éè¿ç»ä¹ éè§ï¼éæ°ä½éªçæ´»ã","en":"Most of the time, we are running on autopilot, instinctively reacting to things around us, and might not pay conscious attention to the state of our body, emotions and mind. Through mindfulness, let\u0027s experience life in a new way!","zh":"çæ´»ä¸ï¼æåå¥½ç¿æ
£ååãèªåå°èªã模å¼ï¼ä¸ç¥ä¸è¦ºå°å¤çäºç©ä½åºåæï¼åèåçæèªå·±èº«é«ãæ
ç·ãææ³å
çæ
ãä¸é½ééç·´ç¿éè§ï¼éæ°é«é©çæ´»ã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/15_Mindfulness-Where-are-You.webp","title":{"cn":"讲åéè§ â âèªå¨å¯¼èªâçä¸ç?","en":"Mindfulness â âHello, Where are you?â","zh":"è¬åéè§ â ãèªåå°èªãçä¸ç?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 11:08:35","user_id":"5"},{"chatbot_id":"139","name":"Lv1\/2 Chatbot_æèå人ç â éæ¼å¹å¼åç®æ¨ ","description":"æèå人ç â éæ¼å¹å¼åç®æ¨ ","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/03_Giving-Thought-to-Your-Life-1.webp","description":{"cn":"ä»·å¼è§å°±å¥½ä¼¼æåéï¼æå¼ä½äººçæ¹åï¼ä»¤æåç¥éç¹ä½åºåèãåºå¢ä¸ªè¯é¢ä¸ï¼ä½ æè
å¯ä»¥éè¿ååé®é¢ï¼æ´è®¤æ¸
èªå·±æéè§å
ä»·å¼ï¼å¹¶å°è¯è®¢ç«åå®å¯è¡å
ç®æ ã ","en":"Values are like a compass, pointing out our life direction and guiding our decisions. In this topic, hopefully you can more clearly define the values most important to you and set practical and actionable goals through the process of self-discovery. ","zh":"å¹å¼è§å°±å¥½ä¼¼æåéï¼æå¼ä½äººçæ¹åï¼ä»¤æåç¥éé»ä½åºåæ¨ãåºå¢å話é¡ä¸ï¼ä½ æè
å¯ä»¥ééåååé¡ï¼æ´èªæ¸
èªå·±æéè¦å
å¹å¼ï¼ä¸¦å試è¨ç«å實å¯è¡å
ç®æ¨ã "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/03_Giving-Thought-to-Your-Life-1.webp","title":{"cn":"æå
ä»·å¼è§ç³»å©ï¼","en":"Giving Thought to Your Life â Values and Goals","zh":"æå
å¹å¼è§ä¿å©ï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-09-14 16:31:13","user_id":"5"},{"chatbot_id":"108","name":"Lv1\/2 Chatbot_身å¿å¥§å¦éä¿","description":"身å¿å¥§å¦éä¿","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/17_Relationship-of-Body-and-Mind_80.webp","description":{"cn":"身ä½åæ
绪ä¹é´ç³»äºä¸ºå½±åï¼èº«ä½ä¼ååºä¿¡å·åæ æ
绪ï¼èæ
绪亦ä¼å½±å身ä½ãéè¿ä¸è¿ä¸²æè¶£å
å®éªï¼ä¸é½å»äºè§£èº«å¿å¥¥å¦å
³ç³»å¦ï¼","en":"Our body and our emotions constantly interact and impact each other - our body sends signals to reflect emotions, while emotions also affect our bodily sensations. Through a series of fun little experiments, let\u0027s learn more about the mind-body relationship! ","zh":"身é«åæ
ç·ä¹éä¿äºçºå½±é¿ï¼èº«é«æç¼åºä¿¡èåæ æ
ç·ï¼èæ
ç·äº¦æå½±é¿èº«é«ãééä¸é£ä¸²æè¶£å
實é©ï¼ä¸é½å»äºè§£èº«å¿å¥§å¦éä¿å¦ï¼"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/17_Relationship-of-Body-and-Mind_80.webp","title":{"cn":"身å¿å¥¥å¦å
³ç³»","en":"The Wondrous Relationship between Body and Mind","zh":"身å¿å¥§å¦éä¿"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:04:56","user_id":"5"},{"chatbot_id":"124","name":"Lv1\/2 Chatbot_æ³æ¾è² å¾åå¾","description":"æ³æ¾è² å¾åå¾","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/12_Release-Negativity.webp","description":{"cn":"æ³å»ä½åæ
å¿èªå·±æ¾è´ï¼åºå¢ä¸ªè¯é¢å
¥é¢ï¼ä½ å¯ä»¥éè¿è®¤è¯æ
绪ï¼å°è¯éæ©å±èªå·±å
è¡¨è¾¾æ¹æ³ï¼å¹¶å¦ä¹ å°éåæ¥çº³æ
绪ã","en":"Have you ever wanted to vent but worry that people might find you too negative? In this topic, through understanding your emotions, you can choose ways of expression most suited for you, while learning to respect and accept different emotions. ","zh":"æ³å»ä½åæå¿èªå·±æ¾è² ï¼åºå¢å話é¡å
¥é¢ï¼ä½ å¯ä»¥ééèªèæ
ç·ï¼åè©¦é¸æå±èªå·±å
è¡¨éæ¹æ³ï¼ä¸¦å¸ç¿å°éåæ¥ç´æ
ç·ã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/12_Release-Negativity.webp","title":{"cn":"æ³æ¾è´å¾åå¾","en":"May I Release Some Negativity...","zh":"æ³æ¾è² å¾åå¾"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-24 17:10:36","user_id":"5"}
805,{"chatbot_id":"125","name":"Lv1\/2 Chatbot_èªèæ
ç· 101","description":"èªèæ
ç· 101","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/13_Understand-Emotions-101.webp","description":{"cn":"æ
绪并å好åä¹åï¼æ¯ç§æ
ç»ªé½æåèªåè½ã让æåä¸é½è®¤è¯æ
绪ï¼å¦ä¹ åååæ
绪å
±å¤ã","en":"Emotions are neither good or bad. Each fulfills its own specific function. Let\u0027s get to know emotions better and co-exist peacefully with them. ","zh":"æ
ç·ä¸¦å好å£ä¹åï¼æ¯ç¨®æ
ç·é½æåèªåè½ãè®æåä¸é½èªèæ
ç·ï¼å¸ç¿åååæ
ç·å
±èã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/13_Understand-Emotions-101.webp","title":{"cn":"è®¤è¯æ
绪101","en":"Understanding Our Emotions 101","zh":"èªèæ
ç·101"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-25 08:25:13","user_id":"5"},{"chatbot_id":"148","name":"Lv1\/2 Chatbot_ç
§é¡§èªå·±ï¼åå£åå室å","description":"ç
§é¡§èªå·±ï¼åå£åå室å","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/21_Being-Friend-with-Stress.webp","description":{"cn":"ä½ æè¿æå°å¤§åååï¼åï¦çä¼¼æ å½¢ï¼ä½èº«ä½ãææ³ãæ
绪åè¡ä¸ºé½ä¸ç´ååºååä¿¡å·ï¼åªè¦çå¿è§å¯ï¼å°±å¯ä»¥èå¬å°èªå·±å
éè¦ãå¢åº¦äº¦ä¼å享å ä¸ªèªæç
§é¡¾æå·§ï¼å¸®å©ä½ åååå
±å¤ã","en":"Are you stressed recently? Stress may seem invisible, yet our body, thoughts, emotions, and behaviours keep sending us stress signals. If you pay close attention to the signals, you will know your own needs. Here, we will share some self-care tips that may help you live with stress.","zh":"ä½ æè¿æå°å¤§å£ååï¼å£ï¦çä¼¼ç¡å½¢ï¼ä½èº«é«ãææ³ãæ
ç·åè¡çºé½ä¸ç´ç¼åºå£åä¿¡èï¼åªè¦çå¿è§å¯ï¼å°±å¯ä»¥èè½å°èªå·±å
éè¦ãå¢åº¦äº¦æå享幾åèªæç
§é¡§æå·§ï¼å¹«å©ä½ åå£åå
±èã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/21_Being-Friend-with-Stress.webp","title":{"cn":"ç
§é¡¾èªå·±ï¼åååå室å","en":"Stress as Our Roommate","zh":"ç
§é¡§èªå·±ï¼åå£åå室å"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-10-12 17:29:55","user_id":"5"},{"chatbot_id":"168","name":"Lv1\/2 Chatbot_ç¶æ¤æçªç¶å°è¨ªæ â ãåævsåæã","description":"ç¶æ¤æçªç¶å°è¨ªæ â ãåævsåæã","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/22_Response-to-Anger.webp","description":{"cn":"嬲ï¼ä»¤äººå¥½æèªç¶å°âååºâï¼ææ¶ä»²ä¼ååºä¸è½èªæ§å
è¡ä¸ºï¼è¢«æ
绪çµä½é¼»èµ°ãçå°å°æ¶é´ï¼æåä¸é½ç»ä¹ âååºâ嬲ï¼èåç³»ååâååºâã","en":"Anger may direct us to âreactâ naturally, act out uncontrollably, and dragged by emotions. Letâs take some time practicing how to ârespondâ instead of âreactâ to anger.","zh":"嬲ï¼ä»¤äººå¥½æèªç¶å°ãåæãï¼ææä»²æååºä¸è½èªæ§å
è¡çºï¼è¢«æ
ç·ç½ä½é¼»èµ°ãçå°å°æéï¼æåä¸é½ç·´ç¿ãåæã嬲ï¼èåä¿å®å®ãåæãã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/22_Response-to-Anger.webp","title":{"cn":"彿¤æçªç¶å°è®¿æ¶ â âååºvsååºâ","en":"When Anger Knocks on Your Door - React or Respond","zh":"ç¶æ¤æçªç¶å°è¨ªæ â ãåævsåæã"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-11-01 09:26:10","user_id":"5"},{"chatbot_id":"123","name":"Lv1\/2 Chatbot_é¢å°è¡çª?","description":"é¢å°è¡çª","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/07_Facing-Conflicts.webp","description":{"cn":"人é
å
³ç³»ä¸é¾å
åºç°å²çªï¼ä½å²çªå¹¶åä¸å®ç³»åäºãç¹æ ·è½å¤ææè¯å°è°è䏿»¡æ
绪ï¼å¹¶çµå·§å°å°å²çªè½¬åæä¸ºäºè§£å¯¹æ¹å
æºä¼ï¼ ","en":"Conflicts may be inevitable in relationships, but are not necessarily detrimental. How can we purposefully handle dissatisfaction and turn it into opportunities to understand each other better? ","zh":"人ééä¿ä¸é£å
åºç¾è¡çªï¼ä½è¡çªä¸¦åä¸å®ä¿å£äºã黿¨£è½å¤ ææèå°èª¿ç¯ä¸æ»¿æ
ç·ï¼ä¸¦éå·§å°å°è¡çªè½åæçºäºè§£å°æ¹å
æ©æï¼ "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/07_Facing-Conflicts.webp","title":{"cn":"é¢å¯¹å²çª?","en":"Facing Interpersonal Conflicts","zh":"é¢å°è¡çª?"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-24 16:28:29","user_id":"5"},{"chatbot_id":"99","name":"Lv1\/2 Chatbot_黿¨£å人ãå¿ã度æºéï¼","description":"Tips for having effective communication \/ being a good listener \/ mindfulness","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/08_Communicate-with-Heart.webp","description":{"cn":"æ²é系人é
å
³ç³»ä¸éè¦ä¸è¯¾ãåºå享åå¾å¬å
è¿ç¨ä¸ï¼æåå¯ä»¥åäººå»ºç«æ·±åå
³ç³»ï¼å¹¶è·å¾æ¯æ´ä»¥è§£å³ç§ç§é¾é¢ã ä¸å¦ä¸é½æ¢è®¨åæ²éæå·§ï¼å¦ä¹ ç¨åçå¿ãèå¿åç¨å¿å»ååºå¯¹æ¹åãâ ","en":"Communication is key to social relationships. We build deep relationships and strong bonds with others through sharing and listening. Through these relationships, we receive the support needed to face challenges. \r\n\r\nLet\u0027s discu
805ss communication skills and learn to respond to others with empathy and patience.","zh":"æºéä¿äººééä¿ä¸éè¦ä¸èª²ãåºå享åå¾è½å éç¨ä¸ï¼æåå¯ä»¥åäººå»ºç«æ·±åéä¿ï¼ä¸¦ç²å¾æ¯æ´ä»¥è§£æ±ºç¨®ç¨®é£é¡ã ä¸å¦ä¸é½æ¢è¨åæºéæå·§ï¼å¸ç¿ç¨åçå¿ãèå¿åç¨å¿å»åæå°æ¹åãâ "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/08_Communicate-with-Heart.webp","title":{"cn":"ç¹æ ·å人âå¿â度æ²éï¼","en":"How to Communicate with Others from the Heart?","zh":"黿¨£å人ãå¿ã度æºéï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-05 18:02:52","user_id":"5"},{"chatbot_id":"106","name":"Lv1\/2 Chatbot_黿¨£å¥½å¥½éªä¼´ä»äººï¼","description":"黿¨£å¥½å¥½éªä¼´ä»äººï¼","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/09_Truely-be-There-for-Others.webp","description":{"cn":"ç¼è§èº«è¾¹äººæå°é¾ï¼æå好èªç¶ä¼æ¥ä½å¸®å¯¹æ¹è§£å³é®é¢ï¼ä½ææ¶å´åæ¸ æ¥å¯¹æ¹æéè¦å©æ¯æ´ãä½ æåè°è¿ï¼å ³é®ç³»å¨äºå èå¬å¢ï¼ä¸é½ç»ä¹ çè¯èå¬ãç¨å¿æå对æ¹éè¦ï¼æä¸ºåè¡ä¸å éªä¼´è ã ","en":"When we see our loved ones struggling, we naturally want to help them solve their problems, but we might not know what sort of support they truly need. Did you know that the key to supporting starts with proper listening? Let\u0027s practice how to listen with sincerity, empathizing with their needs in a heart-felt way, and becoming a better companion\/supporter! ","zh":"ç¼è¦èº«é人æå°é£ï¼æå好èªç¶ææ¥ä½å¹«å°æ¹è§£æ±ºåé¡ï¼ä½ææå»åæ¸ æ¥å°æ¹æéè¦å©æ¯æ´ãä½ æåè«éï¼ééµä¿å¨æ¼å èè½å¢ï¼ä¸é½ç·´ç¿çèª èè½ãç¨å¿æåå°æ¹éè¦ï¼æçºåè¡ä¸å éªä¼´è ã "},"thumbnail":"\/wp-content\/uploads\/2022\/07\/09_Truely-be-There-for-Others.webp","title":{"cn":"ç¹æ ·å¥½å¥½éªä¼´ä»äººï¼","en":"How to Truly be There for Others?","zh":"黿¨£å¥½å¥½éªä¼´ä»äººï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-15 15:31:02","user_id":"5"},{"chatbot_id":"110","name":"Lv1\/2 Chatbot_è¶çæ°èè¶æ¶æ²ï¼","description":"è¶çæ°èè¶æ¶æ²ï¼","settings":{"cover_image":"\/wp-content\/uploads\/2022\/07\/16_Depressed-by-the-News.webp","description":{"cn":"æ³å³æ¶ç´§è´´ç¤¾ä¼å¤§äºï¼ä½æ°é»æ¶æ¯å´ä»¤ä½ è§å¾ä¸çå徿´å·®åï¼çæåè§åå¥½èªæç §é¡¾åæ¥æ¶èµè®¯å ç线ï¼åæ¶å¦ä¹ èç¦åºç¾å¥½å äºä¸ï¼åçæ´»å»ºç«æ´ç´§å¯å èç³»ã","en":"Want to stay in the know, keeping abreast of social events, but can\u0027t help but feel like the world is a worse place with each news headline? It is important for us to set healthy boundaries between self-care and keeping up with the news, while learning to savour what\u0027s happening around us, building a tighter connection with the details of our lives. ","zh":"æ³å³æç·è²¼ç¤¾æå¤§äºï¼ä½æ°èæ¶æ¯å»ä»¤ä½ 覺å¾ä¸çè®å¾æ´å·®åï¼çæåè¦åå¥½èªæç §é¡§åæ¥æ¶è³è¨å çç·ï¼åæå¸ç¿èç¦åºç¾å¥½å äºä¸ï¼åçæ´»å»ºç«æ´ç·å¯å è¯ç¹«ã"},"thumbnail":"\/wp-content\/uploads\/2022\/07\/16_Depressed-by-the-News.webp","title":{"cn":"è¶çæ°é»è¶æ¶æ²ï¼","en":"The More I Read the News the More Depressed I Get","zh":"è¶çæ°èè¶æ¶æ²ï¼"}},"is_default":"0","is_start_directly":"0","create_timestamp":"2021-08-22 07:48:58","user_id":"5"}], 806 init() { 807 // this.selectedChatbot = this.chatbots[0]; 808 }, 809 showChatbotDetail(chatbot) { 810 this.isChatbotDetailPanelVisible = true; 811 this.selectedChatbot = chatbot; 812 }, 813 startChatbot(chatbot_id) { 814 this.isTopicPanelVisible = false; 815 this.isChatbotDetailPanelVisible = false; 816 this.openChatbotPanel(chatbot_id); 817 }, 818 selectOption(e, option) { 819 if (e.key === 'Enter') { 820 this.userMessage = option; 821 } 822 }, 823 async openChatbotPanel(chatbot_id = this.defaultChatbotId) { 824 if (chatbot_id != this.chatbotId) { 825 this.chatbotId = chatbot_id; 826 this.restartChatbot = true; 827 } 828 console.log(this.chatbotId); 829 this.isChatbotPanelVisible = true; 830 $("body").addClass("overflow-hidden"); 831 this.isMessageSectionVisible = true; 832 this.isInputingVisible = true; 833 this.messageList = []; 834 this.expectedUserResponse = null; 835 this.resetChatbotRating(); 836 $.ajax({ 837 type: "POST", 838 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/c
838hat/start/", 839 data: JSON.stringify({ 840 lang: this.currentLang, 841 chatbot_id: this.chatbotId, 842 // user_id: -1, 843 // restart: (this.messageList.length == 0) ? true : false, 844 restart: this.restartChatbot 845 }) 846 }) 847 .done((data) => { 848 console.log(data); 849 this.restartChatbot = false; 850 this.chatId = data.chat_id; 851 this.displayResponses(data); 852 }); 853 854 this.user_level = await this.getUserLevel(); 855 }, 856 async getUserLevel() { 857 return await $.ajax({ 858 type: "GET", 859 url: "https://www.jcthplus.org/api/1.0/tourheart-db/get-user-level", 860 }).then(response => response.user_level); 861 }, 862 selectTopic(id = null) { 863 this.selectedTopicId = id; 864 }, 865 async closeChatbotPanel(dispatch) { 866 this.isChatbotPanelVisible = false; 867 $("body").removeClass("overflow-hidden"); 868 this.isTopicPanelVisible = false; 869 this.isChatbotDetailPanelVisible = false; 870 this.isMessageSectionVisible = true; 871 this.isReportSectionVisible = false; 872 this.isReportEditable = false; 873 this.userMessage = null; 874 this.resetChatbotRating(); 875 876 const level = await this.getUserLevel(); 877 878 dispatch('reload-assessment'); 879 }, 880 checkNeedRating(dispatch) { 881 this.closeChatbotPanel(dispatch); 882 }, 883 openReportPanel(report_id, report_time) { 884 $.ajax({ 885 type: "GET", 886 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/report/get-report/", 887 data: { report_id } 888 }) 889 .done((data) => { 890 console.log(data); 891 this.openedReportID = report_id; 892 this.reportDetail = data.content; 893 this.reportDetail.timestamp = report_time; 894 this.isReportSectionVisible = true; 895 }); 896 }, 897 displayResponses(response) { 898 this.hideInputing(); 899 if ("chat_logs" in response) { 900 this.messageList = response.chat_logs; 901 this.newChat = false; 902 903 if ("chatbot_response" in response) { 904 response.chatbot_response.forEach(msg => { 905 this.displayReceivedMessage(msg); 906 }); 907 } 908 909 if ("expected_user_response" in response) { 910 this.displayExpectedUserResponse(response.expected_user_response); 911 } 912 } else { 913 this.newChat = true; 914 this.displayReceivedMessage(response.chatbot_response[0]); 915 916 if (response.chatbot_response.length > 1) { 917 this.showInputing(); 918 let i = 1; 919 const interval = setInterval(() => { 920 this.hideInputing(); 921 this.displayReceivedMessage(response.chatbot_response[i]); 922 923 if (++i >= response.chatbot_response.length) { 924 clearInterval(interval); 925 // display expected response 926 this.displayExpectedUserResponse(response.expected_user_response); 927 } else { 928 this.showInputing(); 929 } 930 }, this.chatMessageDelay); 931 } else { 932 // display expected response 933 this.displayExpectedUserResponse(response.expected_user_response); 934 } 935 } 936 }, 937 displayExpectedUserResponse(expected_user_response) { 938 if (expected_user_response) { 939 if (expected_user_response.reply_type == "multiple-options") { 940 const length = expected_user_response.reply_content.length; 941 this.userSelection = Array(length).fill(false); 942 console.log(this.userSelection) 943 } 944 945 this.expectedUserResponse = expected_user_response; 946 } 947 }, 948 displayReceivedMessage(message) { 949 this.messageList.push({ ...message, from: "chatbot" }); 950 }, 951 showInputing() { 952 this.isInputingVisible = true; 953 this.scrollToBottom(); 954 }, 955 hideInputing() { 956 this.isInputingVisible = false; 957 this.scrollToBottom(); 958 }, 959 sendUserMessage(message = null) { 960 event.stopPropagation(); 961 this.messageList.push({ 962 from: "user", 963 content_type: "text", 964 content_data: this.userMessage, 965 chat_id: this.chatId, 966 message_id: "user_" + this.messageList.length 967 }); 968 969 this.expectedUserResponse = null; 970 this.showInputing(); 971 972 $.ajax({ 973 type: "POST", 974 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/c
974hat/send-message/", 975 data: JSON.stringify({ 976 chat_id: this.chatId, 977 message: this.userMessage 978 }) 979 }) 980 .done((data) => { 981 console.log(data); 982 if ("chat_id" in data) { 983 this.chatId = data.chat_id; 984 } 985 this.displayResponses(data); 986 this.userMessage = null; 987 }); 988 }, 989 sendUserMessageMultipleOptions() { 990 this.userMessage = ""; 991 const selectedOptions = []; 992 this.userSelection.forEach((selection, index) => { 993 if (selection) { 994 selectedOptions.push(this.expectedUserResponse.reply_content[index]); 995 } 996 }); 997 998 this.userMessage = selectedOptions.join("<br>"); 999 this.sendUserMessage(); 1000 }, 1001 scrollToBottom() { 1002 $("#chat-messages", "#chatbot-panel").animate({ scrollTop: 10000 }, "fast"); 1003 }, 1004 handleScroll(e) { 1005 if (this.messageList.length == 0) { 1006 return false; 1007 } 1008 if (e.target.scrollTop < 100 && !this.isLoadingHistory && e.target.scrollTop < this.lastScrollPos) { 1009 this.isLoadingHistory = true; 1010 let startHeight = this.$refs.messages.scrollHeight; 1011 let scrollTop = this.$refs.messages.scrollTop; 1012 if (startHeight == 0) { 1013 startHeight = 1; 1014 } 1015 1016 $.ajax({ 1017 type: "POST", 1018 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/chat/load-history/", 1019 data: JSON.stringify({ message_id: this.messageList[0].message_id }) 1020 }) 1021 .done((data) => { 1022 console.log(data); 1023 if (data) { 1024 this.isLoadingHistory = false; 1025 1026 this.$nextTick(() => { 1027 if (this.$refs.messages.scrollTop == 0) { 1028 this.$refs.messages.scrollTop = 1; 1029 } 1030 1031 this.messageList = data.concat(this.messageList); 1032 }) 1033 } 1034 }); 1035 } 1036 1037 this.lastScrollPos = this.$refs.messages.scrollTop; 1038 }, 1039 openLoginPanel() { 1040 this.isLoginPanelVisible = true; 1041 }, 1042 favoriteMessage(message) { 1043 console.log(message); 1044 message.favorited = !message.favorited; 1045 1046 $.ajax({ 1047 url: "/api/1.0/tourheart-db/update-user-favorite/", 1048 dataType: "json", 1049 method: "POST", 1050 data: JSON.stringify({ 1051 content: { 1052 category: 'chatbot', 1053 id: Number(message.message_id) ?? "new_message_" + new Date().getTime(), 1054 type: message.content_type, 1055 content: message.content_data 1056 }, 1057 action: message.favorited ? 'add' : 'delete' 1058 }), 1059 success: (data) => { 1060 if (message.favorited) { 1061 message.id = data.id; 1062 this.isFavoritedMessageVisible = true; 1063 setTimeout(() => { 1064 this.isFavoritedMessageVisible = false; 1065 }, 2500); 1066 } 1067 }, 1068 error: (error) => { 1069 message.favorited = !message.favorited; 1070 console.log(data); 1071 } 1072 }); 1073 }, 1074 resetChatbotRating() { 1075 console.log("reset rating"); 1076 this.isChatbotRatingPanelVisible = false; 1077 this.ratingIndex = 1; 1078 this.chatbotRating = { 1079 overall: 0, 1080 willing_to_share: 0, 1081 willing_to_try: 0, 1082 can_help: 0, 1083 understand_more: 0, 1084 } 1085 }, 1086 rate(item, value) { 1087 this.chatbotRating[item] = value; 1088 if (item == 'overall') { 1089 setTimeout(() => { 1090 this.ratingIndex = 2; 1091 }, 800); 1092 } 1093 }, 1094 submitRating() { 1095 // submit ajax 1096 $.ajax({ 1097 type: "POST", 1098 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/chat/rate-chatbot/", 1099 data: JSON.stringify({ 1100 chat_id: this.chatId, 1101 chatbot_id: this.chatbotId, 1102 user_id: 0, 1103 rating: this.chatbotRating 1104 }) 1105 }) 1106 .done((data) => { 1107 console.log(data); 1108 this.ratingIndex = 3; 1109 }); 1110 }, 1111 saveReport() { 1112 const answers = []; 1113 this.reportDetail.report_content.forEach((question) => { 1114 answers.push(question.answer ?? ""); 1115 }); 1116 $.ajax({ 1117 type: "POST", 1118 url: "https://www.jcthplus.org/wp-content/plugins/vermilion-bird/api/2.0/report/save-report/", 1119 data: JSON.stringify({ 1120 report_id: this.openedReportID, 1121 answers, 1122 timestamp: this.reportDetail.timestamp 1123 }) 1124 }) 1125 .done((data) => { 1126 console.log(data); 1127 this.closeReportPanel(); 1128 }); 1129 }, 1130 closeReportPanel() { 1131 this.isReportSectionVisible = false;
1132 this.reportDetail = null; 1133 this.isReportEditable = false; 1134 }, 1135 getDateTime(time) { 1136 const date = new Date(time * 1000); 1137 return "馿¬¡ä¿åæ¼ " + date.getFullYear() + "å¹´" + (date.getMonth() + 1) + "æ" + date.getDate() + "æ¥ " + ( 1138 "0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2); 1139 } 1140 })); 1141}); 1142</script>
1142 1143<footer class="w-full new_container gap-y-8 flex-shrink-0 opacity-100 z-0 bg-new-primary_green_400 py-6 new_md:py-10 new_sm:auto-rows-auto new_sm:gap-y-6"> 1144 <div class="col-span-full flex flex-col new_sm:flex-row items-center new_sm:items-start space-y-6 new_sm:space-y-0 gap-x-6 new_sm:gap-x-2 new_md:gap-x-6 new_sm:order-1 new_sm:pb-2 new_lg:order-3 new_lg:col-span-3 new_lg:row-span-2 new_lg:col-start-7 new_lg:row-start-1"> 1145 <p class="text-white body_1 font-semibold text-center mb-2">ä¸è¼æç¨ç¨å¼</p> 1146 <div class="flex flex-row items-stretch new_lg:items-start space-x-4 new_sm:space-x-2 new_md:space-x-6 new_lg:flex-col new_lg:space-x-0 new_lg:space-y-4"> 1147 <div class="flex flex-col items-stretch justify-between shrink-0 new_lg:space-y-4"> 1148 <a href="https://apps.apple.com/hk/app/%E8%B3%BD%E9%A6%AC%E6%9C%83%E5%BF%83%E5%B0%8E%E9%81%8A-%E8%A8%88%E5%8A%83/id1619066368"> 1149 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/download-badge-ios-zh.svg" class="w-30 new_sm:w-24 new_md:w-30 h-auto" alt="Download on the App Store"> 1150 </a> 1151 <a href="https://play.google.com/store/apps/details?id=com.labviso.jcthplus"> 1152 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/download-badge-android-zh.svg" class="w-30 new_sm:w-24 new_md:w-30 h-auto" alt="Get it on Google play"> 1153 </a> 1154 </div> 1155 <div class="rounded-md bg-white p-2 new_sm:p-1.5 shrink-0"> 1156 <img class="w-18 h-18 new_sm:w-14 new_sm:h-14 new_md:w-18 new_md:h-18" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/qr-download.jpeg" alt="Get the App using QR Code"> 1157 </div> 1158 </div> 1159 <div class="flex flex-row items-center space-x-4 new_sm:space-x-2 new_md:space-x-6 shrink-0 new_lg:hidden"> 1160 <a href="https://www.digital-accessibility.hk/" target="_blank"> 1161 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-app.webp" class="w-30 new_sm:w-26 new_md:w-30 h-auto" alt="Digital accessibility award - App"> 1162 </a> 1163 <a href="https://www.digital-accessibility.hk/" target="_blank"> 1164 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-web.webp" class="w-30 new_sm:w-26 new_md:w-30 h-auto" alt="Digital accessibility award - web"> 1165 </a> 1166 </div> 1167 </div> 1168 1169 <div class="col-span-full new_sm:col-span-5 new_md:col-span-4 new_sm:w-full flex flex-col new_sm:flex-row items-center new_sm:justify-between new_lg:justify-start new_sm:space-x-4 new_sm:order-4 new_lg:order-6 new_lg:col-span-3 new_lg:col-start-7 new_lg:row-start-3"> 1170 <p class="text-white body_1 font-semibold text-center mb-2 new_sm:mb-0 shrink-0">éæ³¨æå</p> 1171 <div class="flex items-center space-x-4 new_sm:space-x-0 new_sm:grow new_sm:justify-between max-w-[140px] shrink-0"> 1172 <a target="_blank" href="https://www.facebook.com/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to facebook page"><i class="fa-brands fa-facebook-f text-2xl text-new-primary_green_400"></i></a> 1173 <a target="_blank" href="https://www.instagram.com/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to instagram page"><i class="fa-brands fa-instagram text-2xl text-new-primary_green_400"></i></a> 1174 <a target="_blank" href="https://www.linkedin.com/company/jctourheart/" class="w-9 h-9 shrink-0 bg-white rounded-full flex items-center justify-center hover:bg-new-accent_yellow" aria-label="link to linkedin page"><i class="fa-brands fa-linkedin-in text-2xl text-new-primary_green_400"></i></a> 1175 </div> 1176 </div> 1177 1178 <div class="col-span-full new_sm:col-span-3 flex flex-col items-center new_sm:items-start space-y-2 new_sm:order-2 new_sm:row-span-2 new_lg:order-1 new_lg:col-start-1 new_lg:row-start-1 new_lg:row-span-1"> 1179 <a href="/events" class="body_1 text-white hover:text-new-accent_yellow">æ´»å</a> 1180 <a href="/articles" class="body_1 text-white hover:text-new-accent_yellow">æç« </a> 1181 <a href="/article/what-is-cognitive-behavioral-therapy" class="body_1 text-white hover:text-new-accent_yellow">èªç¥è¡çºæ²»ç</a> 1182 <a href="/article/what-is-mindfulness" class="body_1 text-white hover:text-new-accent_yellow">éè§</a> 1183 <a href="/article/what-is-cbt-i" class="body_1 text-white hover:text-new-accent_yellow">å¤±ç æ²»ç</a> 1184 </div> 1185 1186 <div class="col-span-full new_sm:col-span-4 flex flex-col items-center new_sm:items-start space-y-2 new_sm:order-3 new_sm:row-span-2 new_lg:order-2 new_lg:col-span-3 new_lg:row-span-4 new_lg:row-start-1 new_lg:col-start-4"> 1187 <a href="/about-us" class="body_1 text-white hover:text-new-accent_yellow">éæ¼æå</a> 1188 <a href="/our-research" class="body_1 text-white hover:text-new-accent_yellow">æåçç ç©¶</a> 1189 <a href="/app" class="body_1 text-white hover:text-new-accent_yellow">JC TourHeart+ æç¨ç¨å¼</a> 1190 <a href="/faq" class="body_1 text-white hover:text-new-accent_yellow">常è¦åé¡</a> 1191 <a href="/personal-information-collection-statement" class="body_1 text-white hover:text-new-accent_yellow">åäººè³ææ¶éè²æ</a> 1192 <a href="/cookie-policy" class="body_1 text-white hover:text-new-accent_yellow">Cookie æ¿ç</a> 1193 <a href="/terms-and-conditions" class="body_1 text-white hover:text-new-accent_yellow">æ¢æ¬¾åç´°å</a> 1194 <a href="/privacy-policy" class="body_1 text-white hover:text-new-accent_yellow">ç§é±æ¿ç</a> 1195 </div> 1196 1197 <div class="col-span-full new_sm:col-span-5 flex flex-col items-stretch space-y-4 new_sm:order-5 new_lg:order-5 new_lg:col-span-3 new_lg:row-span-3 new_lg:row-start-2 new_lg:col-start-1"> 1198 <a href="/immediate-help" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-3 px-6 bg-new-primary_orange_900 hover:bg-new-primary_orange_900_hover text-white body_1 font-semibold text-center">
1198峿å¿çæ¯æ´</a> 1199 <a href="/contact-us" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-3 px-6 bg-new-accent_yellow hover:bg-new-accent_yellow_hover text-new-secondary_brown_900 body_1 font-semibold text-center">è¯çµ¡æå</a> 1200 <a href="/ai-mental-health-chatbot" class="h-11 new_sm:max-w-[198px] rounded-full flex items-center justify-center space-x-2 px-6 bg-white border border-new-secondary_brown_300 hover:border-new-secondary_brown_900 text-new-secondary_brown_800"> 1201 <img class="h-8 w-auto" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/immediate-help/boon.png" alt="Chat with Boon"> 1202 <p class="body_1 font-semibold text-center">èé¿æ¬è天</p> 1203 </a> 1204 </div> 1205 1206 <div class="hidden new_lg:flex new_lg:flex-col space-y-4 new_lg:col-span-3 new_lg:row-span-4 new_lg:order-4 new_lg:row-start-1 new_lg:col-start-10"> 1207 <a href="https://www.digital-accessibility.hk/" target="_blank"> 1208 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-app.webp" class="w-40 h-auto" alt="Digital accessibility award - app"> 1209 </a> 1210 <a href="https://www.digital-accessibility.hk/" target="_blank"> 1211 <img src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/footer/digital-accessibility-award-web.webp" class="w-40 h-auto" alt="Digital accessibility award - web"> 1212 </a> 1213 </div> 1214 1215 <p class="col-span-full help_text text-white text-center new_sm:order-6 new_lg:order-7">© 2022-2026 賽馬æå¿å°é+ä¿çæææ¬å©</p> 1216</footer>
vendor: 143 bytes, lines 1216-1217
1216 1217<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2ed2de0e287741bf6526c024-|49" defer></script>
1217<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"97f77d44729044c0be8b6eda9db33d01","spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1217
1217
1218<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40fbb3bcc9013cd',t:'MTc5MDM5OTEwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1218</body> 1219</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.