{"id":1251,"date":"2025-11-13T06:10:36","date_gmt":"2025-11-13T06:10:36","guid":{"rendered":"https:\/\/autosiltstopper.com\/?page_id=1251"},"modified":"2025-11-28T10:40:40","modified_gmt":"2025-11-28T10:40:40","slug":"user-login","status":"publish","type":"page","link":"https:\/\/autosiltstopper.com\/?page_id=1251","title":{"rendered":"USER LOGIN"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1251\" class=\"elementor elementor-1251\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04e3258 e-flex e-con-boxed e-con e-parent\" data-id=\"04e3258\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2deb1f3 elementor-widget elementor-widget-html\" data-id=\"2deb1f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ENV \u2013 PROJECT LOGIN (ANIMATED) -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\"\/>\r\n\r\n<style>\r\n  :root{\r\n    --login-bg-1:#e8f0ff;\r\n    --login-bg-2:#ffe8ff;\r\n    --card-bg:#ffffff;\r\n    --accent:#7c4dff;\r\n    --accent-soft:#e1d5ff;\r\n    --accent-soft2:#ffe5ff;\r\n    --error:#d93025;\r\n  }\r\n\r\n  \/* Full screen shell *\/\r\n  .env-login-shell{\r\n    min-height:100vh;\r\n    width:100%;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    padding:40px 12px;\r\n    box-sizing:border-box;\r\n    font-family:\"Poppins\",Arial,sans-serif;\r\n    position:relative;\r\n    overflow:hidden;\r\n    background:radial-gradient(circle at top left,var(--login-bg-1),#ffffff 60%) fixed;\r\n    animation:env-bg-move 16s ease-in-out infinite alternate;\r\n  }\r\n\r\n  \/* soft gradient background blobs *\/\r\n  .env-login-blob{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    filter:blur(40px);\r\n    opacity:0.7;\r\n    pointer-events:none;\r\n    mix-blend-mode:multiply;\r\n  }\r\n  .env-blob-1{\r\n    width:320px;height:320px;\r\n    background:var(--login-bg-1);\r\n    top:-80px;left:-60px;\r\n    animation:env-blob-float-1 18s ease-in-out infinite;\r\n  }\r\n  .env-blob-2{\r\n    width:380px;height:380px;\r\n    background:var(--login-bg-2);\r\n    bottom:-120px;right:-40px;\r\n    animation:env-blob-float-2 20s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes env-bg-move{\r\n    0%{background-position:0% 0%;}\r\n    100%{background-position:100% 100%;}\r\n  }\r\n  @keyframes env-blob-float-1{\r\n    0%{transform:translate3d(0,0,0);}\r\n    50%{transform:translate3d(35px,30px,0);}\r\n    100%{transform:translate3d(0,60px,0);}\r\n  }\r\n  @keyframes env-blob-float-2{\r\n    0%{transform:translate3d(0,0,0);}\r\n    50%{transform:translate3d(-40px,-20px,0);}\r\n    100%{transform:translate3d(0,-60px,0);}\r\n  }\r\n\r\n  \/* Card *\/\r\n  .env-login-card{\r\n    position:relative;\r\n    width:100%;\r\n    max-width:410px;\r\n    background:var(--card-bg);\r\n    border-radius:28px;\r\n    padding:40px 40px 34px;\r\n    box-shadow:0 24px 60px rgba(15,23,42,0.20);\r\n    box-sizing:border-box;\r\n    text-align:center;\r\n    backdrop-filter:blur(8px);\r\n    transform:translateY(16px);\r\n    opacity:0;\r\n    animation:env-card-in 0.65s cubic-bezier(.18,.89,.32,1.28) forwards;\r\n  }\r\n\r\n  @keyframes env-card-in{\r\n    0%{opacity:0;transform:translateY(22px) scale(.96);}\r\n    100%{opacity:1;transform:translateY(0) scale(1);}\r\n  }\r\n\r\n  \/* glowing ring behind avatar *\/\r\n  .env-login-orbit{\r\n    position:absolute;\r\n    top:-22px;left:50%;\r\n    width:120px;height:120px;\r\n    transform:translateX(-50%);\r\n    border-radius:50%;\r\n    background:radial-gradient(circle,#f0e9ff 0,#fdfbff 45%,transparent 70%);\r\n    z-index:0;\r\n  }\r\n\r\n  .env-login-avatar{\r\n    position:absolute;\r\n    top:-30px;left:50%;\r\n    transform:translateX(-50%);\r\n    width:76px;height:76px;\r\n    border-radius:50%;\r\n    background:linear-gradient(135deg,#7c4dff,#a158ff);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    color:#fff;\r\n    font-size:34px;\r\n    box-shadow:0 14px 32px rgba(124,77,255,0.38);\r\n    z-index:1;\r\n    animation:env-avatar-pulse 2.8s ease-in-out infinite;\r\n  }\r\n  @keyframes env-avatar-pulse{\r\n    0%,100%{transform:translateX(-50%) scale(1);}\r\n    50%{transform:translateX(-50%) scale(1.06);}\r\n  }\r\n\r\n  .env-login-title{\r\n    margin-top:52px;\r\n    font-size:24px;\r\n    font-weight:600;\r\n    color:#111827;\r\n  }\r\n  .env-login-sub{\r\n    font-size:12px;\r\n    margin-top:4px;\r\n    color:#6b7280;\r\n  }\r\n\r\n  \/* form fields *\/\r\n  .env-login-form{\r\n    margin-top:26px;\r\n    text-align:left;\r\n  }\r\n  .env-login-group{\r\n    margin-bottom:18px;\r\n  }\r\n  .env-login-label{\r\n    font-size:12px;\r\n    font-weight:500;\r\n    color:#6b7280;\r\n    margin-bottom:5px;\r\n    display:block;\r\n  }\r\n  .env-login-input-wrap{\r\n    position:relative;\r\n  }\r\n  .env-login-input-icon{\r\n    position:absolute;\r\n    top:50%;left:16px;\r\n    transform:translateY(-50%);\r\n    font-size:17px;\r\n    opacity:0.7;\r\n  }\r\n  .env-login-input{\r\n    width:100%;\r\n    border-radius:999px;\r\n    border:1px solid #e5e7eb;\r\n    padding:11px 16px 11px 50px!important;\r\n    font-size:14px;\r\n    outline:none;\r\n    background:#f9fafb;\r\n    transition:all .18s ease;\r\n  }\r\n  .env-login-input:focus{\r\n    border-color:var(--accent);\r\n    background:#ffffff;\r\n    box-shadow:0 0 0 2px rgba(124,77,255,0.20);\r\n  }\r\n\r\n  \/* button with ripple *\/\r\n  .env-login-btn{\r\n    width:100%;\r\n    border:none;\r\n    border-radius:999px;\r\n    padding:12px 16px;\r\n    margin-top:10px;\r\n    background:linear-gradient(135deg,#7c4dff,#a158ff);\r\n    color:#ffffff;\r\n    font-size:15px;\r\n    font-weight:600;\r\n    cursor:pointer;\r\n    box-shadow:0 16px 30px rgba(124,77,255,0.35);\r\n    transition:transform .14s ease, box-shadow .14s ease;\r\n    position:relative;\r\n    overflow:hidden;\r\n  }\r\n  .env-login-btn span{\r\n    position:relative;\r\n    z-index:1;\r\n  }\r\n  .env-login-btn::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:radial-gradient(circle at center,rgba(255,255,255,0.5),transparent 55%);\r\n    opacity:0;\r\n    transform:scale(0.4);\r\n    transition:opacity .2s ease, transform .2s ease;\r\n  }\r\n  .env-login-btn:hover:not([disabled]){\r\n    transform:translateY(-1px);\r\n    box-shadow:0 20px 40px rgba(124,77,255,0.40);\r\n  }\r\n  .env-login-btn:hover::before{\r\n    opacity:1;\r\n    transform:scale(1);\r\n  }\r\n  .env-login-btn[disabled]{\r\n    opacity:0.7;\r\n    cursor:wait;\r\n    box-shadow:none;\r\n  }\r\n\r\n  .env-login-loading-dot{\r\n    display:inline-block;\r\n    width:6px;height:6px;\r\n    margin:0 1px;\r\n    border-radius:50%;\r\n    background:#fff;\r\n    animation:env-dot-bounce 1s infinite ease-in-out;\r\n  }\r\n  .env-login-loading-dot:nth-child(2){animation-delay:.12s;}\r\n  .env-login-loading-dot:nth-child(3){animation-delay:.24s;}\r\n\r\n  @keyframes env-dot-bounce{\r\n    0%,80%,100%{transform:translateY(0);opacity:.7;}\r\n    40%{transform:translateY(-5px);opacity:1;}\r\n  }\r\n\r\n  .env-login-error{\r\n    margin-top:10px;\r\n    font-size:12px;\r\n    color:var(--error);\r\n    text-align:center;\r\n    display:none;\r\n  }\r\n\r\n  .env-login-footer{\r\n    margin-top:22px;\r\n    font-size:11px;\r\n    color:#9ca3af;\r\n    text-align:center;\r\n  }\r\n\r\n  @media(max-width:600px){\r\n    .env-login-shell{\r\n      padding:24px 10px;\r\n    }\r\n    .env-login-card{\r\n      padding:34px 20px 28px;\r\n      max-width:360px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"env-login-shell\">\r\n  <!-- floating background blobs -->\r\n  <div class=\"env-login-blob env-blob-1\"><\/div>\r\n  <div class=\"env-login-blob env-blob-2\"><\/div>\r\n\r\n  <div class=\"env-login-card\">\r\n    <div class=\"env-login-orbit\"><\/div>\r\n    <div class=\"env-login-avatar\">\r\n      <span>\ud83d\udd12<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"env-login-title\">Sign in to ENV Portal<\/div>\r\n    <div class=\"env-login-sub\">Secure access for project dashboards<\/div>\r\n\r\n    <form id=\"env-login-form\" class=\"env-login-form\" autocomplete=\"off\">\r\n      <div class=\"env-login-group\">\r\n        <label class=\"env-login-label\" for=\"env-username\">Username<\/label>\r\n        <div class=\"env-login-input-wrap\">\r\n          <span class=\"env-login-input-icon\">\ud83d\udc64<\/span>\r\n          <input\r\n            type=\"text\"\r\n            id=\"env-username\"\r\n            class=\"env-login-input\"\r\n            placeholder=\"Enter your user name\"\r\n            required\r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"env-login-group\">\r\n        <label class=\"env-login-label\" for=\"env-password\">Password<\/label>\r\n        <div class=\"env-login-input-wrap\">\r\n          <span class=\"env-login-input-icon\">\ud83d\udd11<\/span>\r\n          <input\r\n            type=\"password\"\r\n            id=\"env-password\"\r\n            class=\"env-login-input\"\r\n            placeholder=\"Enter your password\"\r\n            required\r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <button type=\"submit\" class=\"env-login-btn\" id=\"env-login-btn\">\r\n        <span>Login<\/span>\r\n      <\/button>\r\n\r\n      <div id=\"env-login-error\" class=\"env-login-error\"><\/div>\r\n\r\n      <div class=\"env-login-footer\">\r\n        \u00a9 ENV Automation \u2014 Secure Access\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const form      = document.getElementById('env-login-form');\r\n  const userInput = document.getElementById('env-username');\r\n  const passInput = document.getElementById('env-password');\r\n  const errorBox  = document.getElementById('env-login-error');\r\n  const loginBtn  = document.getElementById('env-login-btn');\r\n\r\n  function projectNameFromUsername(u){\r\n    if(!u) return null;\r\n    const key = u.toLowerCase().trim();\r\n    switch(key){\r\n      case 'samsungcr112': return 'Samsung CR112 Project';\r\n      case 'kimlynus':     return 'Kimly NUS Project';\r\n      \/\/ add more mappings here in future if needed\r\n      default: return null;\r\n    }\r\n  }\r\n\r\n  function setButtonLoading(isLoading){\r\n    if(isLoading){\r\n      loginBtn.disabled = true;\r\n      loginBtn.innerHTML =\r\n        '<span>' +\r\n        '<span class=\"env-login-loading-dot\"><\/span>' +\r\n        '<span class=\"env-login-loading-dot\"><\/span>' +\r\n        '<span class=\"env-login-loading-dot\"><\/span>' +\r\n        '<\/span>';\r\n    }else{\r\n      loginBtn.disabled = false;\r\n      loginBtn.innerHTML = '<span>Login<\/span>';\r\n    }\r\n  }\r\n\r\n  form.addEventListener('submit', function (e) {\r\n    e.preventDefault();\r\n\r\n    const username = userInput.value.trim();\r\n    const password = passInput.value;\r\n\r\n    if (!username || !password) {\r\n      errorBox.textContent = 'Please enter both username and password.';\r\n      errorBox.style.display = 'block';\r\n      return;\r\n    }\r\n\r\n    errorBox.style.display = 'none';\r\n    setButtonLoading(true);\r\n\r\n    fetch('https:\/\/api.autosiltstopper.com\/env_login.php', {\r\n      method: 'POST',\r\n      headers: {\r\n        'Content-Type': 'application\/x-www-form-urlencoded'\r\n      },\r\n      body:\r\n        'username=' + encodeURIComponent(username) +\r\n        '&password=' + encodeURIComponent(password)\r\n    })\r\n    .then(res => res.json())\r\n    .then(data => {\r\n      console.log('LOGIN RESPONSE:', data);\r\n\r\n      if (data.success) {\r\n        \/\/ Decide nice display name for dashboard\r\n        let displayName =\r\n          data.display_name ||\r\n          projectNameFromUsername(username) ||\r\n          username;\r\n\r\n        \/\/ \ud83d\udd10 Save login details for dashboard\r\n        localStorage.setItem('env_username', username);\r\n        localStorage.setItem('env_display_name', displayName);\r\n\r\n        \/\/ Redirect \u2013 common dashboard\r\n        let url = (data.redirect_url || '').trim();\r\n        if (!url) {\r\n          \/\/ your common dashboard page\r\n          url = 'https:\/\/autosiltstopper.com\/?page_id=1263';\r\n        }\r\n        window.location.href = url;\r\n\r\n      } else {\r\n        errorBox.textContent = data.message || 'Invalid username or password.';\r\n        errorBox.style.display = 'block';\r\n        setButtonLoading(false);\r\n      }\r\n    })\r\n    .catch(err => {\r\n      console.error(err);\r\n      errorBox.textContent = 'Server error. Please try again.';\r\n      errorBox.style.display = 'block';\r\n      setButtonLoading(false);\r\n    });\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd12 Sign in to ENV Portal Secure access for project dashboards Username \ud83d\udc64 Password \ud83d\udd11 Login \u00a9 ENV Automation \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1251","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/pages\/1251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1251"}],"version-history":[{"count":5,"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/pages\/1251\/revisions"}],"predecessor-version":[{"id":1453,"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=\/wp\/v2\/pages\/1251\/revisions\/1453"}],"wp:attachment":[{"href":"https:\/\/autosiltstopper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}