Sravan
/
BizGaze_Remote


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BizGaze Support</title>
<style>
  :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --line:#e6e9ef; }
  *{box-sizing:border-box;}
  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;}
  header{background:var(--blue);padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;}
  .brandrow{display:flex;align-items:center;gap:.7rem;}
  .brand{font-weight:700;color:#fff;font-size:1.1rem;} .brand span{color:var(--brand);font-weight:600;}
  .signin{color:#dbe4f5;text-decoration:none;font-size:.9rem;border:1px solid #46598c;border-radius:8px;padding:.45rem 1rem;}
  .signin:hover{background:var(--blue-d);}
  .wrap{flex:1;display:grid;place-items:center;padding:2.5rem 1rem;}
  .inner{max-width:780px;width:100%;text-align:center;}
  h1{color:var(--blue);font-size:1.8rem;margin:0 0 .4rem;}
  .sub{color:var(--muted);margin-bottom:2.2rem;}
  .choices{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;}
  .choice{flex:1;min-width:260px;max-width:340px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2.2rem 1.6rem;text-decoration:none;color:var(--ink);box-shadow:0 10px 30px rgba(20,30,60,.06);transition:transform .12s,box-shadow .12s;}
  .choice:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(20,30,60,.12);border-color:var(--brand);}
  .icon{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;margin:0 auto 1.1rem;}
  .icon.share{background:#FFF7DA;} .icon.connect{background:var(--blue-soft);}
  .icon svg{width:34px;height:34px;}
  .choice h3{margin:.2rem 0 .4rem;color:var(--blue);font-size:1.15rem;}
  .choice p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;}
  .foot{color:var(--muted);font-size:.82rem;margin-top:2.4rem;}
  footer{text-align:center;color:#9aa3b2;font-size:.8rem;padding:1rem;}
  .profile{position:relative}
  .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}
  .profile .pbtn:hover{background:rgba(255,255,255,.24)}
  .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}
  .profile .pmenu.open{display:block}
  .profile .pmenu a{display:block;padding:.6rem .9rem;color:#1f2430;text-decoration:none;font-size:.9rem;cursor:pointer}
  .profile .pmenu a:hover{background:#f1f5f9}
  .profile .pmenu a.danger{color:#b91c1c;border-top:1px solid #eef1f6}
</style>
</head>
<body>
<header>
  <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'">
    <div class="brand">BizGaze <span>Support</span></div>
  </div>
  <div id="authArea"><a class="signin" href="/console">Staff sign in</a></div>
</header>
<div class="wrap">
  <div class="inner">
    <h1>How can we help you today?</h1>
    <div class="sub">Secure remote support — no downloads, you stay in control.</div>
    <div class="choices">
      <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>
        <h3>Share my screen</h3>
        <p>You need help. Get a one-time code and show your screen to a BizGaze support agent.</p>
      </a>
      <a class="choice" href="/connect">
        <div class="icon connect"><svg viewBox="0 0 24 24" fill="none" stroke="#1F3B73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10"/><path d="M2 21h20"/><path d="m9 9 3 3-3 3"/></svg></div>
        <h3>Connect to a screen</h3>
        <p>You're a support agent. Sign in, then enter the customer's code to view their screen.</p>
      </a>
    </div>
    <div class="foot">🔒 Screen sharing only starts after the customer approves it, and can be stopped anytime.</div>
  </div>
</div>
<footer>© BizGaze · Remote Support</footer>
<script>
function pEsc(s){return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}
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="/console">Console / Dashboard</a><a id="plogout" class="danger">Logout</a></div></div>';}
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();
(async function(){try{const r=await fetch('/api/me');if(r.ok){const me=await r.json();document.getElementById('authArea').innerHTML=profileHTML(me.name||me.email);wireProfile();}}catch(_){}})();
</script>
</body>
</html>