2026-06-05 17:29:09 +05:30
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2026-06-30 17:01:15 +05:30
< title > Biz Connect</ title >
2026-06-05 17:29:09 +05:30
< style >
2026-06-09 16:47:43 +05:30
: root { --brand : #FFC708 ; --brand-d : #E0AC00 ; --blue : #1F3B73 ; --blue-d : #16294f ; --blue-soft : #EAF0FB ; --ink : #1f2430 ; --muted : #6b7280 ; --bg : #f6f8fb ; --line : #e6e9ef ; }
2026-06-05 17:29:09 +05:30
* { box-sizing : border-box ;}
2026-06-09 16:47:43 +05:30
body { font-family : 'Segoe UI' , system-ui , sans-serif ; background : var ( -- bg ); color : var ( -- ink ); margin : 0 ; min-height : 100 vh ; display : flex ; flex-direction : column ;}
header { background : var ( -- blue ); padding : .85 rem 1.5 rem ; display : flex ; justify-content : space-between ; align-items : center ;}
. brandrow { display : flex ; align-items : center ; gap : .7 rem ;}
. brand { font-weight : 700 ; color : #fff ; font-size : 1.1 rem ;} . brand span { color : var ( -- brand ); font-weight : 600 ;}
. signin { color : #dbe4f5 ; text-decoration : none ; font-size : .9 rem ; border : 1 px solid #46598c ; border-radius : 8 px ; padding : .45 rem 1 rem ;}
. signin : hover { background : var ( -- blue - d );}
. wrap { flex : 1 ; display : grid ; place-items : center ; padding : 2.5 rem 1 rem ;}
. inner { max-width : 780 px ; width : 100 % ; text-align : center ;}
h1 { color : var ( -- blue ); font-size : 1.8 rem ; margin : 0 0 .4 rem ;}
. sub { color : var ( -- muted ); margin-bottom : 2.2 rem ;}
2026-06-23 16:15:29 +05:30
. ssobtn { display : inline-flex ; align-items : center ; justify-content : center ; gap : .6 rem ; background : var ( -- brand ); color : var ( -- blue ); text-decoration : none ; font-weight : 700 ; font-size : 1.02 rem ; padding : .95 rem 2 rem ; border-radius : 12 px ; box-shadow : 0 10 px 26 px rgba ( 224 , 172 , 0 , .32 ); transition : transform .12 s , box-shadow .12 s , background .12 s ;}
. ssobtn : hover { transform : translateY ( -2 px ); box-shadow : 0 16 px 34 px rgba ( 224 , 172 , 0 , .4 ); background : var ( -- brand - d );}
. ssobtn . bmark { width : 26 px ; height : 26 px ; border-radius : 7 px ; background : var ( -- blue ); color : var ( -- brand ); display : grid ; place-items : center ; font-weight : 800 ; font-size : .9 rem ;}
2026-06-12 00:40:07 +05:30
. divider { display : flex ; align-items : center ; gap : 1 rem ; color : var ( -- muted ); font-size : .85 rem ; max-width : 360 px ; margin : 1.8 rem auto ;}
. divider :: before , . divider :: after { content : "" ; flex : 1 ; height : 1 px ; background : var ( -- line );}
2026-06-09 16:47:43 +05:30
. choices { display : flex ; gap : 1.4 rem ; flex-wrap : wrap ; justify-content : center ;}
2026-06-12 00:40:07 +05:30
. choice { flex : 1 ; min-width : 260 px ; max-width : 360 px ; background : #fff ; border : 1 px solid var ( -- line ); border-radius : 18 px ; padding : 1.8 rem 1.6 rem ; text-decoration : none ; color : var ( -- ink ); box-shadow : 0 10 px 30 px rgba ( 20 , 30 , 60 , .06 ); transition : transform .12 s , box-shadow .12 s , border-color .12 s ; display : flex ; align-items : center ; gap : 1.1 rem ; text-align : left ;}
2026-06-09 16:47:43 +05:30
. choice : hover { transform : translateY ( -3 px ); box-shadow : 0 16 px 38 px rgba ( 20 , 30 , 60 , .12 ); border-color : var ( -- brand );}
2026-06-12 00:40:07 +05:30
. icon { width : 56 px ; height : 56 px ; flex : 0 0 56 px ; border-radius : 16 px ; display : grid ; place-items : center ;}
2026-06-09 16:47:43 +05:30
. icon . share { background : #FFF7DA ;} . icon . connect { background : var ( -- blue - soft );}
2026-06-12 00:40:07 +05:30
. icon svg { width : 30 px ; height : 30 px ;}
. choice h3 { margin : 0 0 .25 rem ; color : var ( -- blue ); font-size : 1.1 rem ;}
. choice p { margin : 0 ; color : var ( -- muted ); font-size : .88 rem ; line-height : 1.45 ;}
2026-06-09 16:47:43 +05:30
. foot { color : var ( -- muted ); font-size : .82 rem ; margin-top : 2.4 rem ;}
footer { text-align : center ; color : #9aa3b2 ; font-size : .8 rem ; padding : 1 rem ;}
. profile { position : relative }
. profile . pbtn { display : flex ; align-items : center ; gap : .4 rem ; background : rgba ( 255 , 255 , 255 , .14 ); color : #fff ; border : 1 px solid #46598c ; border-radius : 10 px ; padding : .45 rem .85 rem ; font-weight : 600 ; font-size : .88 rem ; cursor : pointer }
. profile . pbtn : hover { background : rgba ( 255 , 255 , 255 , .24 )}
. profile . pmenu { position : absolute ; right : 0 ; top : calc ( 100 % + 6 px ); background : #fff ; border : 1 px solid #e6e9ef ; border-radius : 10 px ; box-shadow : 0 10 px 28 px rgba ( 0 , 0 , 0 , .18 ); min-width : 190 px ; overflow : hidden ; z-index : 5000 ; display : none }
. profile . pmenu . open { display : block }
. profile . pmenu a { display : block ; padding : .6 rem .9 rem ; color : #1f2430 ; text-decoration : none ; font-size : .9 rem ; cursor : pointer }
. profile . pmenu a : hover { background : #f1f5f9 }
. profile . pmenu a . danger { color : #b91c1c ; border-top : 1 px solid #eef1f6 }
2026-06-05 17:29:09 +05:30
</ style >
2026-06-23 18:47:24 +05:30
< script src = "/icons.js?v=3" ></ script >
2026-06-05 17:29:09 +05:30
</ head >
< body >
< header >
2026-06-09 16:47:43 +05:30
< div class = "brandrow" >
< img src = "/logo.png" alt = "" style = "height:40px;width:auto;max-width:170px;border-radius:8px;object-fit:contain;background:#fff;padding:4px 10px" onerror = "this.style.display='none'" >
2026-06-30 17:01:15 +05:30
< div class = "brand" > Biz < span > Connect</ span ></ div >
2026-06-09 16:47:43 +05:30
</ div >
2026-06-12 00:40:07 +05:30
< div id = "authArea" ></ div >
2026-06-05 17:29:09 +05:30
</ header >
2026-06-09 16:47:43 +05:30
< div class = "wrap" >
< div class = "inner" >
2026-06-30 17:01:15 +05:30
< h1 > Welcome to Biz Connect</ h1 >
2026-06-12 00:40:07 +05:30
< div class = "sub" > Chat, meetings and secure remote support — for the BizGaze ecosystem.</ div >
2026-06-30 17:01:15 +05:30
<!-- Customer path FIRST (no account needed): share your screen for support. -->
< div class = "divider" > Need support? — no account needed</ div >
2026-06-12 00:40:07 +05:30
< div class = "choices" style = "max-width:400px;margin:0 auto" >
2026-06-09 16:47:43 +05:30
< a class = "choice" href = "/share" >
< div class = "icon share" >< svg viewBox = "0 0 24 24" fill = "none" stroke = "#BA7515" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >< rect x = "2" y = "3" width = "20" height = "14" rx = "2" />< path d = "M8 21h8M12 17v4" /></ svg ></ div >
2026-06-30 17:01:15 +05:30
< div >< h3 > Share my screen</ h3 >< p > Get a one-time code and show your screen to a Biz Connect support agent — no login, no download.</ p ></ div >
2026-06-09 16:47:43 +05:30
</ a >
2026-06-05 17:29:09 +05:30
</ div >
2026-06-30 17:01:15 +05:30
< div class = "foot" style = "margin:.7rem 0 0" >< span data-ic = "lock" data-sz = "14" ></ span > Screen sharing only starts after you approve it, and can be stopped anytime.</ div >
<!-- Team member path BELOW: log in to the full app. Stub SSO -> /home for now. -->
< div class = "divider" style = "margin-top:1.6rem" > BizGaze team member?</ div >
< a class = "ssobtn" id = "ssoBtn" href = "/home" >< span class = "bmark" > B</ span > Log in with BizGaze</ a >
2026-06-09 16:47:43 +05:30
</ div >
</ div >
< footer > © BizGaze · Remote Support</ footer >
< script >
function pEsc ( s ){ return String ( s == null ? '' : s ). replace ( /[&<>"]/g , c =>({ '&' : '&' , '<' : '<' , '>' : '>' , '"' : '"' }[ c ]));}
2026-06-12 00:40:07 +05:30
function profileHTML ( name ){ return '<div class="profile"><button class="pbtn" id="pbtn">' + pEsc ( name ) + ' <span style="font-size:.65rem">▾</span></button><div class="pmenu" id="pmenu"><a href="/home">Home</a><a href="/dashboard">Dashboard</a><a id="plogout" class="danger">Logout</a></div></div>' ;}
2026-06-09 16:47:43 +05:30
function wireProfile (){ const btn = document . getElementById ( 'pbtn' ), menu = document . getElementById ( 'pmenu' ); if ( ! btn ) return ; btn . onclick = ( e )=>{ e . stopPropagation (); menu . classList . toggle ( 'open' );}; document . addEventListener ( 'click' ,()=> menu . classList . remove ( 'open' )); const lo = document . getElementById ( 'plogout' ); if ( lo ) lo . onclick = async ()=>{ try { await fetch ( '/api/logout' ,{ method : 'POST' });} catch ( _ ){} location . href = '/' ;};}
function makeBrandClickable (){ document . querySelectorAll ( '.brandrow,.wordmark' ). forEach ( el =>{ el . style . cursor = 'pointer' ; el . addEventListener ( 'click' ,()=>{ location . href = '/' ;});});}
makeBrandClickable ();
2026-06-30 17:01:15 +05:30
// Already signed in -> skip this landing entirely and go straight to the app (no redundant
// "Open Biz Connect" page). This landing only shows when logged out.
( async function (){ try { const r = await fetch ( '/api/me' ); if ( r . ok ){ location . replace ( '/home' ); return ; }} catch ( _ ){}})();
2026-06-05 17:29:09 +05:30
</ script >
2026-06-23 16:15:29 +05:30
< script >( function (){ var s = document . createElement ( 'style' ); s . textContent = '.ic{display:inline-block;vertical-align:middle}' ; document . head . appendChild ( s ); document . querySelectorAll ( '[data-ic]' ). forEach ( function ( e ){ e . insertAdjacentHTML ( 'afterbegin' , window . ic ( e . getAttribute ( 'data-ic' ), + e . getAttribute ( 'data-sz' ) || 16 ));});})();</ script >
2026-06-05 17:29:09 +05:30
</ body >
</ html >
