mySPH Login

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>mySPH Login</title>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"> <script src="/mysph/js/bootstrap_5.2.3.min.js"></script> <link rel="stylesheet" href="/mysph/css/bootstrap_5.2.3.min.css"> <style type="text/css"> .popup-overlay { background: rgba(0, 0, 0, 0.5) !important; pointer-events: none; } .popup-content { pointer-events: all; } </style> <style type="text/css"> body { height: 100vh; padding: 0; margin: 0; overflow: hidden; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; background-color: #1E3A5A !important; } /* hi-res laptops and desktops */ @media (min-width: 768px){ .lightbox_container { margin-left: 9% !important; } #mySPHContent { display: grid; } .lightBox .lightbox_container { margin-left: -187.5px !important; } } @media (min-width: 768px) and (max-width: 1023px) { #mySPHContent { display: none !important; } .lightbox_container { margin-left: -187.5px !important; } } @media (min-width:320px) and (max-width: 767px) { #fixed-header { display: none !important; } #mySPHContent { display: none !important; } body { background-image: none !important; background-color: rgba(0, 0, 0, 0.1) !important; } } @media (min-width: 375px) and (max-width: 926px) and (-webkit-min-device-pixel-ratio: 3) { #fixed-header { display: none !important; } #mySPHContent { display: none !important; } body { background-image: none !important; background-color: rgba(0, 0, 0, 0.1) !important; } } #mySPHContent { color: #FFFFFF; float: left; position:fixed; top: 50%; right: 50%; vertical-align: middle; margin-top: -180px; margin-right: 9%; visibility: hidden; width: 384px; z-index: 111111111; } .title { padding: 10px; } .column { display: flex; align-items: center; margin-bottom: 1rem !important; } .column h5{ padding: 5px; margin-bottom: 0 !important; } #fixed-header { position: absolute; margin: 15px; color: #FFFFFF; visibility: hidden; top: 0; z-index: 111111111; } div#mySPHContent:lang(zh){ gap: 15px 0 !important; } div#mySPHContent .title{ width: 355px !important; } div#mySPHContent:lang(zh) .title{ width: 384px !important; } div#mySPHContent:lang(ta) .title{ width: 490px !important; } div#mySPHContent .subTitle{ width: 364px !important; } div#mySPHContent:lang(ta) .subTitle{ width: 420px !important; } div#mySPHContent:lang(zh) .subTitle{ width: 420px !important; } div#mySPHContent h5{ font-size: 18px !important; } div#mySPHContent:lang(zh) h5{ line-height: 41px !important; } div#loadingSrc { height: 100%; } .bubbles-wrapper { position: relative; top: 50%; width: 100%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .bubbles { position: relative; display: inline-block; width: 30px; height: 30px; margin: auto; border-radius: 100%; -webkit-animation-name: up-down; animation-name: up-down; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1); animation-timing-function: cubic-bezier(.42, 0, .58, 1); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #b1 { background-color: #C6D1EA; } #b2 { background-color: #A0CFDD; -webkit-animation-delay: 75ms; animation-delay: 75ms; } #b3 { background-color: #7ACCD0; -webkit-animation-delay: 150ms; animation-delay: 150ms; } #b4 { background-color: #3D94BC; -webkit-animation-delay: 225ms; animation-delay: 225ms; } #b5 { background-color: #005CA8; -webkit-animation-delay: 300ms; animation-delay: 300ms; } @-webkit-keyframes up-down { 0% { -webkit-transform: translateY(-50%) scale(0.2); transform: translateY(-50%) scale(0.2); } 50% { -webkit-transform: translateY(50%) scale(1.2); transform: translateY(50%) scale(1.2); } 100% { -webkit-transform: translateY(-50%) scale(0.2); transform: translateY(-50%) scale(0.2); } } @keyframes up-down { 0% { -webkit-transform: translateY(-50%) scale(0.2); transform: translateY(-50%) scale(0.2); } 50% { -webkit-transform: translateY(50%) scale(1.2); transform: translateY(50%) scale(1.2); } 100% { -webkit-transform: translateY(-50%) scale(0.2); transform: translateY(-50%) scale(0.2); } } </style>  <script> (function (w, d, s, l, i) { if (w.location === w.parent.location) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); } })(window, document, 'script', 'dataLayer', 'GTM-5Q7WW3V'); </script> <script> var exports = {}; </script> <script src="/mysph/js/sanitize-url.min.js"></script> </head> <body>  <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5Q7WW3V" height="0" width="0" style="display: none; visibility: hidden"></iframe> </noscript>  <div id="loadingSrc"> <div class="bubbles-wrapper"> <div class="bubbles" id="b1"></div> <div class="bubbles" id="b2"></div> <div class="bubbles" id="b3"></div> <div class="bubbles" id="b4"></div> <div class="bubbles" id="b5"></div> </div> </div> <div id="fixed-header"> <p id="contentHeader" class="tagline"></p> </div> <div id="mySPHContent"> <div class="title"> <h1 id="t1" class="section-title">One account, <br/>multiple benefits</h1> </div> <div class="subTitle"> <div class="column"> <img src="images/signin-icon.svg" alt="signin-icon"> <h5 id="s1" class="blockquote">Get easy access to all SPH Media products</h5> </div> <div class="column"> <img src="images/secured.svg" alt="secured"> <h5 id="s2" class="blockquote">Your personal information is private and safe</h5> </div> <div class="column"> <img src="images/union.svg" alt="union"> <h5 id="s3" class="blockquote">Get personalized content and more features</h5> </div> </div> </div> <script type="text/javascript">var _mySPHObj;</script> <div svc="" lan="" id="mysph"></div> <script type="text/javascript"> function getUrlVars() { var vars = {}; var currentUrl = sanitizeUrl(window.location.href); var parts = currentUrl.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) { key = decodeURIComponent(key); value = decodeURIComponent(value); vars[key] = value; }); return vars; } var urlParams = getUrlVars(); if (typeof urlParams['access_token'] !== 'undefined') { document.getElementById("loadingSrc").style.display = "block"; document.getElementById("mysph").style.display = "none"; } else { document.getElementById("loadingSrc").style.display = "none"; document.getElementById("mysph").style.display = "block"; } var standalone_arr = {}; // ST web standalone_arr['st'] = {}; standalone_arr['st']['svc'] = "st_online"; standalone_arr['st']['lan'] = "en"; // ST UAT web standalone_arr['stuat'] = {}; standalone_arr['stuat']['svc'] = "st_uat_online"; standalone_arr['stuat']['lan'] = "en"; // ST AWS qa standalone_arr['staws'] = {}; standalone_arr['staws']['svc'] = "st_aws_online"; standalone_arr['staws']['lan'] = "en"; // ST PRD standalone_arr['stprd'] = {}; standalone_arr['stprd']['svc'] = "st_prd_online"; standalone_arr['stprd']['lan'] = "en"; // ST epaper standalone_arr['stepaper'] = {}; standalone_arr['stepaper']['svc'] = "stp"; standalone_arr['stepaper']['lan'] = "en"; // BT web standalone_arr['bt'] = {}; standalone_arr['bt']['svc'] = "bts"; standalone_arr['bt']['lan'] = "en"; // BT epaper standalone_arr['btepaper'] = {}; standalone_arr['btepaper']['svc'] = "bts_ep"; standalone_arr['btepaper']['lan'] = "en"; // ZB web standalone_arr['zb'] = {}; standalone_arr['zb']['svc'] = "zbs"; standalone_arr['zb']['lan'] = "zh"; // ZB PRD standalone_arr['zbprd'] = {}; standalone_arr['zbprd']['svc'] = "zb_prd_online"; standalone_arr['zbprd']['lan'] = "zh"; // ZB epaper standalone_arr['zbepaper'] = {}; standalone_arr['zbepaper']['svc'] = "zbs_ep"; standalone_arr['zbepaper']['lan'] = "zh"; // BH web standalone_arr['bh'] = {}; standalone_arr['bh']['svc'] = "bh_online"; standalone_arr['bh']['lan'] = "ms"; // BH epaper standalone_arr['bhepaper'] = {}; standalone_arr['bhepaper']['svc'] = "bh_online_ep"; standalone_arr['bhepaper']['lan'] = "ms"; // TM web standalone_arr['tm'] = {}; standalone_arr['tm']['svc'] = "tm_online"; standalone_arr['tm']['lan'] = "ta"; // TM epaper standalone_arr['tmepaper'] = {}; standalone_arr['tmepaper']['svc'] = "cir_tm_online"; standalone_arr['tmepaper']['lan'] = "ta"; // SM epaper standalone_arr['smepaper'] = {}; standalone_arr['smepaper']['svc'] = "cir_sm_online"; standalone_arr['smepaper']['lan'] = "zh"; //STOMP standalone_arr['stomp'] = {}; standalone_arr['stomp']['svc'] = "sto"; standalone_arr['stomp']['lan'] = "en"; //ICON standalone_arr['icon'] = {}; standalone_arr['icon']['svc'] = "magicon_online"; standalone_arr['icon']['lan'] = "en"; //Magazine standalone_arr['magazine'] = {}; standalone_arr['magazine']['svc'] = "maguw_online"; standalone_arr['magazine']['lan'] = "en"; //PEAK standalone_arr['peak'] = {}; standalone_arr['peak']['svc'] = "magpeak_online"; standalone_arr['peak']['lan'] = "en"; // UW epaper standalone_arr['uwepaper'] = {}; standalone_arr['uwepaper']['svc'] = "uw_online"; standalone_arr['uwepaper']['lan'] = "zh"; // BT Beta Prd standalone_arr['btbeta'] = {}; standalone_arr['btbeta']['svc'] = "bt_beta_online"; standalone_arr['btbeta']['lan'] = "en"; // BH PRD standalone_arr['bhprd'] = {}; standalone_arr['bhprd']['svc'] = "bh_prd_online"; standalone_arr['bhprd']['lan'] = "ms"; // BT AWS Prd D9 standalone_arr['btaws'] = {}; standalone_arr['btaws']['svc'] = "bt_aws"; standalone_arr['btaws']['lan'] = "en"; // Awedio PRD standalone_arr['awedioprd'] = {}; standalone_arr['awedioprd']['svc'] = "awedio_prd_online"; standalone_arr['awedioprd']['lan'] = "en"; // TM AWS Prd D9 standalone_arr['tmprd'] = {}; standalone_arr['tmprd']['svc'] = "tm_prd_online"; standalone_arr['tmprd']['lan'] = "en"; // Awedio standalone_arr['awedio'] = {}; standalone_arr['awedio']['svc'] = "awedio_online"; standalone_arr['awedio']['lan'] = "en"; var serviceFlag = ""; var lang = "en"; var pubName = ""; let pubProduct; if (typeof urlParams['pubName'] !== 'undefined') { pubName = urlParams['pubName']; serviceFlag = standalone_arr[pubName]['svc']; lang = standalone_arr[pubName]['lan']; } switch (serviceFlag) { case 'st_online': case 'stp': pubProduct = 'st'; break; case 'zbs': case 'zbs_ep': case 'cir_sm_online': pubProduct = 'zb'; break; case 'bts': case 'bts_ep': pubProduct = 'bt'; break; case 'bh_online': case 'bh_online_ep': pubProduct = 'bh'; break; case 'tm_online': case 'cir_tm_online': pubProduct = 'tm'; break; default: pubProduct = 'mysph'; break; } document.getElementById("mysph").setAttribute("svc", serviceFlag); document.getElementById("mysph").setAttribute("lan", lang); document.getElementById("mySPHContent").setAttribute("lang", lang); document.getElementById('fixed-header').classList.add(pubProduct); document.getElementById('mySPHContent').classList.add(pubProduct); //document.getElementById("mysph").setAttribute("standalone", true); </script> <script src="/mysph/js/mySPHIdentityLightbox.js"></script> <script type="text/javascript"> var urlParams = getUrlVars(); var reset = urlParams['resetPassword']; var forgotPwd = urlParams['forgotpasswrd']; var delayInMilliseconds = 1000; //1 second function loadMySPH () { setTimeout(function () { const title = _mySPHObj.i18nTrans('mySPH_context_title'); const subTitle1 = _mySPHObj.i18nTrans('mySPH_context_subTitle1'); const subTitle2 = _mySPHObj.i18nTrans('mySPH_context_subTitle2'); const subTitle3 = _mySPHObj.i18nTrans('mySPH_context_subTitle3'); const headerText1 = _mySPHObj.i18nTrans('mySPH_header_text1'); const headerText2 = _mySPHObj.i18nTrans('mySPH_header_text2'); const headerText3 = _mySPHObj.i18nTrans('mySPH_header_text3'); document.getElementById("t1").innerHTML = title; document.getElementById("s1").innerHTML = subTitle1; document.getElementById("s2").innerHTML = subTitle2; document.getElementById("s3").innerHTML = subTitle3; if (pubName === "btepaper") { document.getElementById("contentHeader").innerHTML = headerText1; document.body.style.backgroundImage = "url('images/background_sgx.jpg')"; } else if (pubName === "bhepaper") { document.getElementById("contentHeader").innerHTML = headerText3; document.body.style.backgroundImage = "url('images/background_flower_dome.jpg')"; } else { document.getElementById("contentHeader").innerHTML = headerText2; document.body.style.backgroundImage = "url('images/background_skyline.jpg')"; } document.getElementById("fixed-header").style.visibility = "visible"; document.getElementById("mySPHContent").style.visibility = "visible"; }, 100); } function gotoLoginFormUIUX(_mySPHObj) { setTimeout(function () { if(pubName.includes("epaper")){ window._mySPHObj.openLogin(); loadMySPH(); }else{ window._mySPHObj.openStandloneLogin(stateTokenForStandalonePub); document.body.style.backgroundImage = "none"; let lightboxContainer = document.querySelector("#mysph"); lightboxContainer.classList.add("lightBox"); } }, delayInMilliseconds); } if ((typeof urlParams['resetPassword'] === "undefined") && (typeof urlParams['forgotpasswrd'] === "undefined")) { if(top!==self){ console.log("loaded in iframe"); }else { gotoLoginFormUIUX(_mySPHObj); } } var stateTokenForStandalonePub = ""; if (typeof urlParams['stateToken'] !== 'undefined') { stateTokenForStandalonePub= urlParams['stateToken']; } </script> </body> </html>

CINXE.COM

mySPH Login