Sravan
/
BizGaze_Remote
Watch 0
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
11 Commits
3 Branches
Tree: ba8bfc3f46
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ba8bfc3f46'
${ noResults }
BizGaze_Remote/server/public/index.html

index.html 6.8KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>BizGaze Support</title>

  7. <style>

  8.   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --line:#e6e9ef; }

  9.   *{box-sizing:border-box;}

  10.   body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;min-height:100vh;display:flex;flex-direction:column;}

  11.   header{background:var(--blue);padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;}

  12.   .brandrow{display:flex;align-items:center;gap:.7rem;}

  13.   .brand{font-weight:700;color:#fff;font-size:1.1rem;} .brand span{color:var(--brand);font-weight:600;}

  14.   .signin{color:#dbe4f5;text-decoration:none;font-size:.9rem;border:1px solid #46598c;border-radius:8px;padding:.45rem 1rem;}

  15.   .signin:hover{background:var(--blue-d);}

  16.   .wrap{flex:1;display:grid;place-items:center;padding:2.5rem 1rem;}

  17.   .inner{max-width:780px;width:100%;text-align:center;}

  18.   h1{color:var(--blue);font-size:1.8rem;margin:0 0 .4rem;}

  19.   .sub{color:var(--muted);margin-bottom:2.2rem;}

  20.   .ssobtn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;padding:.95rem 2rem;border-radius:12px;box-shadow:0 10px 26px rgba(31,59,115,.28);transition:transform .12s,box-shadow .12s,background .12s;}

  21.   .ssobtn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(31,59,115,.34);background:var(--blue-d);}

  22.   .ssobtn .bmark{width:26px;height:26px;border-radius:7px;background:var(--brand);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:.9rem;}

  23.   .divider{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.85rem;max-width:360px;margin:1.8rem auto;}

  24.   .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

  25.   .choices{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;}

  26.   .choice{flex:1;min-width:260px;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem 1.6rem;text-decoration:none;color:var(--ink);box-shadow:0 10px 30px rgba(20,30,60,.06);transition:transform .12s,box-shadow .12s,border-color .12s;display:flex;align-items:center;gap:1.1rem;text-align:left;}

  27.   .choice:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(20,30,60,.12);border-color:var(--brand);}

  28.   .icon{width:56px;height:56px;flex:0 0 56px;border-radius:16px;display:grid;place-items:center;}

  29.   .icon.share{background:#FFF7DA;} .icon.connect{background:var(--blue-soft);}

  30.   .icon svg{width:30px;height:30px;}

  31.   .choice h3{margin:0 0 .25rem;color:var(--blue);font-size:1.1rem;}

  32.   .choice p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45;}

  33.   .foot{color:var(--muted);font-size:.82rem;margin-top:2.4rem;}

  34.   footer{text-align:center;color:#9aa3b2;font-size:.8rem;padding:1rem;}

  35.   .profile{position:relative}

  36.   .profile .pbtn{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.14);color:#fff;border:1px solid #46598c;border-radius:10px;padding:.45rem .85rem;font-weight:600;font-size:.88rem;cursor:pointer}

  37.   .profile .pbtn:hover{background:rgba(255,255,255,.24)}

  38.   .profile .pmenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e6e9ef;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);min-width:190px;overflow:hidden;z-index:5000;display:none}

  39.   .profile .pmenu.open{display:block}

  40.   .profile .pmenu a{display:block;padding:.6rem .9rem;color:#1f2430;text-decoration:none;font-size:.9rem;cursor:pointer}

  41.   .profile .pmenu a:hover{background:#f1f5f9}

  42.   .profile .pmenu a.danger{color:#b91c1c;border-top:1px solid #eef1f6}

  43. </style>

  44. </head>

  45. <body>

  46. <header>

  47.   <div class="brandrow">

  48.     <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'">

  49.     <div class="brand">BizGaze <span>Support</span></div>

  50.   </div>

  51.   <div id="authArea"></div>

  52. </header>

  53. <div class="wrap">

  54.   <div class="inner">

  55.     <h1>Welcome to BizGaze Connect</h1>

  56.     <div class="sub">Chat, meetings and secure remote support — for the BizGaze ecosystem.</div>

  57.     <!-- Stub SSO: routes to staff login for now; swap href to /sso once BizGaze SSO is wired. -->

  58.     <a class="ssobtn" id="ssoBtn" href="/home"><span class="bmark">B</span> Log in with BizGaze</a>

  59.     <div class="divider">need support? no account required</div>

  60.     <div class="choices" style="max-width:400px;margin:0 auto">

  61.       <a class="choice" href="/share">

  62.         <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>

  63.         <div><h3>Share my screen</h3><p>Get a one-time code and show your screen to a BizGaze support agent — no login, no download.</p></div>

  64.       </a>

  65.     </div>

  66.     <div class="foot">🔒 Screen sharing only starts after you approve it, and can be stopped anytime.</div>

  67.   </div>

  68. </div>

  69. <footer>© BizGaze · Remote Support</footer>

  70. <script>

  71. function pEsc(s){return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}

  72. function profileHTML(name){return '<div class="profile"><button class="pbtn" id="pbtn">'+pEsc(name)+' <span style="font-size:.65rem">&#9662;</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>';}

  73. 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='/';};}

  74. function makeBrandClickable(){document.querySelectorAll('.brandrow,.wordmark').forEach(el=>{el.style.cursor='pointer';el.addEventListener('click',()=>{location.href='/';});});}

  75. makeBrandClickable();

  76. (async function(){try{const r=await fetch('/api/me');if(r.ok){const me=await r.json();

  77.   document.getElementById('authArea').innerHTML=profileHTML(me.name||me.email);wireProfile();

  78.   // Already signed in: swap the login CTA for an "enter app" CTA.

  79.   const b=document.getElementById('ssoBtn'); if(b){ b.innerHTML='Open BizGaze Connect &rarr;'; b.href='/home'; }

  80.   const h=document.querySelector('.inner h1'); if(h){ const fn=String(me.name||'').trim().split(/\s+/)[0]; h.textContent='Welcome back'+(fn?', '+fn:'')+'!'; }

  81.   const dv=document.querySelector('.divider'); if(dv) dv.textContent='need to help someone? share your screen';

  82. }}catch(_){}})();

  83. </script>

  84. </body>

  85. </html>