Showing source for: https://static.mysph.sph.com.sg/mysph/standalone/login.html?pubName=stepaper&stateToken=002MK5A2exicc5T3Qvl8UPKe64TTqmGc4QAJ-nuuQw
Duration: 0.032137s
Server: AmazonS3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>mySPH Login</title>
<!-- Libs added to make page responsive -->
<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">
<link href='https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&family=Source+Sans+Pro' rel='stylesheet'>
<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: block; }
.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: 383px;
z-index: 111111111;
}
.title {
padding: 10px;
font-weight: 700;
font-family: 'Source Sans Pro', sans-serif;
}
.subTitle {
font-family: "Noto Sans";
font-weight: 400;
}
.column {
display: flex;
align-items: center;
}
.column h5{
padding: 5px;
}
#fixed-header {
position: absolute;
margin: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #FFFFFF;
font-size: 12px;
visibility: hidden;
top: 0;
z-index: 111111111;
}
div#mySPHContent h1{
font-size: 36px !important;
}
div#mySPHContent:lang(ta) h1{
font-size: 34px !important;
}
div#mySPHContent h5{
font-size: 16px !important;
}
div#mySPHContent:lang(ta) h5{
font-size: 14px !important;
}
div#mySPHContent .title{
width: 345px !important;
}
div#mySPHContent:lang(ta) .title{
width: 490px !important;
}
div#mySPHContent .subTitle{
width: 325px !important;
}
div#mySPHContent:lang(ta) .subTitle{
width: 400px !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>
<!-- Code for GTM -->
<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>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5Q7WW3V" height="0" width="0"
style="display: none; visibility: hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (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"></p>
</div>
<div id="mySPHContent">
<div class="title">
<h1 id="t1">Get more with <br/>mySPH</h1>
</div>
<div class="subTitle">
<div class="column">
<img src="images/signin-icon.svg" alt="signin-icon">
<h5 id="s1">Get easy access to all SPH Media products</h5>
</div>
<div class="column">
<img src="images/secured.svg" alt="secured">
<h5 id="s2">Your personal information is private and safe</h5>
</div>
<div class="column">
<img src="images/union.svg" alt="union">
<h5 id="s3">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 = "";
if (typeof urlParams['pubName'] !== 'undefined') {
pubName = urlParams['pubName'];
serviceFlag = standalone_arr[pubName]['svc'];
lang = standalone_arr[pubName]['lan'];
}
document.getElementById("mysph").setAttribute("svc", serviceFlag);
document.getElementById("mysph").setAttribute("lan", lang);
document.getElementById("mySPHContent").setAttribute("lang", lang);
//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>