auto-login/cws-store/promo/promo_1400.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:1400px; height:560px; }
  body{ overflow:hidden;
    font-family:"Segoe UI","Microsoft YaHei",-apple-system,sans-serif;
    background:
      radial-gradient(90% 150% at 100% -30%, rgba(233,69,96,0.5) 0%, rgba(233,69,96,0.15) 40%, transparent 62%),
      radial-gradient(120% 160% at -5% 130%, rgba(15,52,96,0.95) 0%, transparent 55%),
      linear-gradient(128deg,#1a1a2e 0%,#12203d 46%,#0f3460 100%);
    color:#e0e0e0;
  }
  /* grid decoration */
  .grid{ position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(90% 90% at 15% 50%, #000 0%, transparent 70%);
            mask-image:radial-gradient(90% 90% at 15% 50%, #000 0%, transparent 70%);
  }
  .wrap{ position:absolute; inset:0; display:flex; align-items:center; padding:0 64px; }
  .left{ width:610px; }
  .brand{ display:flex; align-items:center; gap:16px; }
  .brand img{ width:52px; height:52px; border-radius:12px; }
  .brand b{ font-size:26px; color:#fff; letter-spacing:.2px; }
  .brand small{ display:block; font-size:13px; color:#e94560; letter-spacing:1.5px; font-weight:700; }
  .hl{ margin-top:26px; font-size:40px; line-height:1.12; color:#fff; font-weight:800; }
  .hl em{ font-style:normal; color:#e94560; }
  .sub{ margin-top:14px; font-size:17px; line-height:1.55; color:#b9c0d4; }
  .points{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
  .pt{ display:flex; align-items:center; gap:8px; background:rgba(22,33,62,.85);
    border:1px solid #0f3460; border-radius:22px; padding:8px 16px; font-size:14.5px; color:#e9edf7; }
  .pt i{ width:16px; height:16px; border-radius:50%; flex:none;
    background:radial-gradient(circle at 35% 30%, #ff7d95, #e94560 60%); }
  .panel{ flex:1; max-width:560px; margin-left:70px; background:#1a1a2e; border:1px solid #0f3460;
    border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.5); padding:18px 20px 22px; }
  .p-title{ text-align:center; font-weight:700; color:#e94560; font-size:17px; padding-bottom:12px;
    border-bottom:1px solid #16213e; }
  .p-env{ display:flex; align-items:center; gap:8px; margin-top:12px; }
  .p-env span{ font-size:11px; color:#888; }
  .p-env .sel{ flex:1; background:#16213e; border:1px solid #0f3460; height:28px; border-radius:6px;
    display:flex; align-items:center; padding-left:10px; font-size:12px; color:#e0e0e0; }
  .p-env .gear{ width:28px; height:28px; background:#0f3460; border-radius:6px; display:flex;
    align-items:center; justify-content:center; color:#e0e0e0; font-size:13px; }
  .items{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
  .it{ background:#16213e; border:1px solid #0f3460; border-radius:8px; padding:9px 12px; }
  .it .d{ font-weight:600; color:#e94560; font-size:14px; }
  .it .u{ color:#888; font-size:10.5px; margin-top:2px; }
  .it .u b{ color:#dfe3ee; font-weight:400; letter-spacing:1px; }
  .it.on{ border-color:#3d6fa8; }
  .fill{ margin-top:14px; background:#e94560; color:#fff; text-align:center; font-size:13px;
    font-weight:700; padding:9px 0; border-radius:7px; }
</style></head>
<body>
  <div class="grid"></div>
  <div class="wrap">
    <div class="left">
      <div class="brand">
        <img src="../icons/icon128.png" alt="">
        <div><small>A U T O &nbsp;L O G I N &nbsp;M A N A G E R</small><b>Auto Login Manager</b></div>
      </div>
      <div class="hl">Log in with one click.<br><em>Local encryption.</em> No servers.</div>
      <div class="sub">Store credentials per site and environment.<br>
        Fill and submit automatically on authorized pages — only on sites you choose.</div>
      <div class="points">
        <div class="pt"><i></i> AES-256 local vault</div>
        <div class="pt"><i></i> Wildcard &amp; path rules</div>
        <div class="pt"><i></i> Multi-environment</div>
      </div>
    </div>
    <div class="panel">
      <div class="p-title">Auto Login Manager</div>
      <div class="p-env"><span>Environment</span><div class="sel">Production</div><div class="gear">⚙</div></div>
      <div class="items">
        <div class="it on"><div class="d">oa.com</div><div class="u">user <b>••••••</b></div></div>
        <div class="it"><div class="d">git.example.com</div><div class="u">dev <b>••••••</b></div></div>
        <div class="it"><div class="d">mail.example.com</div><div class="u">me <b>••••••</b></div></div>
        <div class="it"><div class="d">portal.example.cn</div><div class="u">ops <b>••••••</b></div></div>
      </div>
      <div class="fill">Fill current page</div>
    </div>
  </div>
</body></html>