GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Passwords & Accounts</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#121212; color:#EDEDED;13  }14  .status-bar {15    height:110px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 42px; color:#ffffff; font-weight:500; font-size:34px;18    opacity:0.95;19  }20  .status-right { display:flex; gap:28px; align-items:center; }21  .back-row {22    height:90px; display:flex; align-items:center;23    padding:0 30px; color:#EDEDED;24  }25  .back-row svg { width:42px; height:42px; fill:none; stroke:#EDEDED; stroke-width:6; }26  .title {27    font-size:92px; font-weight:300; line-height:1.08;28    padding:20px 52px 0 52px;29  }30  .section-label {31    color:#8AB4F8; font-size:36px; font-weight:500;32    padding:44px 52px 16px 52px;33  }34  .row {35    display:flex; align-items:center; gap:36px;36    padding:26px 52px; border-bottom:1px solid #1e1e1e;37  }38  .row .logo {39    width:86px; height:86px; border-radius:43px;40    background:#ffffff; display:flex; align-items:center; justify-content:center;41    color:#4285F4; font-weight:700; font-size:44px;42    box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset;43  }44  .row .main-text {45    font-size:48px; font-weight:500; color:#EDEDED;46  }47  .row .sub-text {48    font-size:32px; color:#9AA0A6; margin-top:6px;49  }50  .row.flex-grow { justify-content:space-between; }51  .divider {52    width:2px; height:54px; background:#3a3a3a; margin-right:22px;53  }54  .gear {55    color:#9CC2FF; font-size:52px; line-height:1;56  }57  .account-item { padding:30px 52px; display:flex; align-items:center; gap:32px; border-bottom:1px solid #1e1e1e; }58  .account-item .avatar {59    width:76px; height:76px; border-radius:50%; background:#ffffff; display:flex; align-items:center; justify-content:center;60    color:#34A853; font-weight:800; font-size:38px;61    box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset;62  }63  .account-item .texts { display:flex; flex-direction:column; }64  .account-item .email { font-size:44px; color:#EDEDED; }65  .account-item .service { font-size:30px; color:#9AA0A6; margin-top:8px; }66  .add-account { padding:34px 52px; display:flex; align-items:center; gap:28px; border-bottom:1px solid #1e1e1e; }67  .add-account .plus {68    width:60px; height:60px; border-radius:30px; border:2px solid #9AA0A6;69    display:flex; align-items:center; justify-content:center; color:#9AA0A6; font-size:44px; font-weight:700;70  }71  .add-account .label { font-size:44px; color:#EDEDED; }72  .toggle-row {73    padding:42px 52px; display:flex; align-items:flex-start; justify-content:space-between;74    border-top:1px solid #222; margin-top:10px;75  }76  .toggle-texts { max-width:780px; }77  .toggle-title { font-size:48px; color:#EDEDED; }78  .toggle-sub { font-size:32px; color:#9AA0A6; margin-top:12px; }79  .underline {80    width:320px; height:6px; background:#3a3a3a; border-radius:3px; margin-top:16px;81  }82  .switch {83    width:168px; height:92px; border-radius:46px;84    background:#9BBEF9; position:relative; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.08);85  }86  .switch::before {87    content:""; position:absolute; top:12px; left:92px;88    width:68px; height:68px; border-radius:34px; background:#e6f0ff; box-shadow:0 2px 6px rgba(0,0,0,0.35);89  }90  /* Helper icons */91  .wifi {92    width:36px; height:36px;93  }94  .battery {95    width:40px; height:40px;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div>9:10</div>105    <div class="status-right">106      <!-- minimalist placeholders -->107      <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">108        <path d="M3 8c4-3 14-3 18 0"/><path d="M6 12c3-2 9-2 12 0"/><path d="M9.5 15.5c2-1 3-1 5 0"/><circle cx="12" cy="18.5" r="1.5" fill="#ffffff"/>109      </svg>110      <svg class="battery" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">111        <rect x="2" y="6" width="18" height="12" rx="2" />112        <rect x="21" y="9" width="2" height="6" />113        <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>114      </svg>115    </div>116  </div>117 118  <!-- Back -->119  <div class="back-row">120    <svg viewBox="0 0 24 24">121      <path d="M15 5 L8 12 L15 19" />122    </svg>123  </div>124 125  <!-- Title -->126  <div class="title">Passwords & accounts</div>127 128  <!-- Passwords -->129  <div class="section-label">Passwords</div>130  <div class="row">131    <div class="logo">G</div>132    <div style="display:flex; flex-direction:column;">133      <div class="main-text">Google</div>134      <div style="width:80px; height:6px; background:#2b2b2b; margin-top:16px; border-radius:3px;"></div>135    </div>136  </div>137 138  <!-- Autofill service -->139  <div class="section-label">Autofill service</div>140  <div class="row flex-grow">141    <div style="display:flex; align-items:center; gap:36px;">142      <div class="logo">G</div>143      <div class="main-text">Google</div>144    </div>145    <div style="display:flex; align-items:center; gap:22px;">146      <div class="divider"></div>147      <div class="gear">⚙️</div>148    </div>149  </div>150 151  <!-- Accounts for Owner -->152  <div class="section-label">Accounts for Owner</div>153 154  <div class="account-item">155    <div class="avatar">G</div>156    <div class="texts">157      <div class="email">amelia.miller2709@gmail.com</div>158      <div class="service">Google</div>159    </div>160  </div>161 162  <div class="account-item">163    <div class="avatar">G</div>164    <div class="texts">165      <div class="email">jasonsmith9810244659106538@g..</div>166      <div class="service">Google</div>167    </div>168  </div>169 170  <div class="account-item">171    <div class="avatar">G</div>172    <div class="texts">173      <div class="email">miller.william197305@gmail.com</div>174      <div class="service">Google</div>175    </div>176  </div>177 178  <!-- Add account -->179  <div class="add-account">180    <div class="plus">+</div>181    <div class="label">Add account</div>182  </div>183 184  <!-- Toggle -->185  <div class="toggle-row">186    <div class="toggle-texts">187      <div class="toggle-title">Automatically sync app data</div>188      <div class="toggle-sub">Let apps refresh data automatically</div>189      <div class="underline"></div>190    </div>191    <div class="switch" aria-label="Switch On"></div>192  </div>193 194</div>195</body>196</html>