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; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EAEAEA;13    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 100px; padding: 24px 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #EAEAEA; font-size: 42px; letter-spacing: 0.5px;20  }21  .status-right { display: flex; align-items: center; gap: 24px; }22  .notif-dots { display: flex; gap: 18px; margin-left: 24px; }23  .dot { width: 22px; height: 22px; background: #EAEAEA; border-radius: 50%; opacity: 0.9; }24  .top-area {25    position: absolute; top: 110px; left: 0; right: 0;26    padding: 0 40px;27  }28  .back-row { height: 80px; display: flex; align-items: center; }29  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }30  .title {31    margin-top: 30px;32    font-size: 96px; line-height: 110px; font-weight: 500;33    color: #F1F3F4;34  }35  .content {36    margin-top: 60px;37    padding: 0 40px 40px 40px;38  }39  .section-title {40    color: #8AB4F8; font-size: 36px; margin: 44px 0 12px 0;41  }42  .list-row {43    display: flex; align-items: center; justify-content: space-between;44    padding: 28px 0; border-bottom: 1px solid #2A2A2A;45  }46  .left { display: flex; align-items: center; gap: 28px; }47  .app-icon {48    width: 88px; height: 88px; border-radius: 50%;49    background: #FFFFFF; border: 1px solid #DADCE0;50    display: flex; align-items: center; justify-content: center;51    color: #4285F4; font-weight: 700; font-size: 44px;52  }53  .primary { font-size: 44px; color: #EAEAEA; }54  .secondary { font-size: 34px; color: #9AA0A6; margin-top: 6px; }55  .right-icons { display: flex; align-items: center; gap: 24px; }56  .vert-divider { width: 2px; height: 44px; background: #2A2A2A; }57  .account-row {58    display: flex; align-items: center; justify-content: space-between;59    padding: 34px 0; border-bottom: 1px solid #2A2A2A;60  }61  .account-text { display: flex; flex-direction: column; }62  .add-row {63    display: flex; align-items: center; gap: 28px;64    padding: 36px 0; border-bottom: 1px solid #2A2A2A;65    font-size: 44px;66  }67  .divider-space { height: 40px; border-bottom: 1px solid #2A2A2A; }68  .toggle-section {69    padding: 34px 0;70    display: flex; align-items: center; justify-content: space-between;71  }72  .toggle-text { display: flex; flex-direction: column; gap: 8px; }73  .toggle-title { font-size: 44px; color: #EAEAEA; }74  .toggle-sub { font-size: 34px; color: #9AA0A6; }75  .toggle {76    width: 156px; height: 76px; border-radius: 38px;77    background: #88B0FF; position: relative; border: 2px solid #7EA0F6;78  }79  .toggle::after {80    content: ""; position: absolute; right: 6px; top: 6px;81    width: 64px; height: 64px; border-radius: 50%;82    background: #CFE0FF; box-shadow: 0 2px 4px rgba(0,0,0,0.3);83  }84  .gesture-pill {85    position: absolute; bottom: 38px; left: 50%;86    width: 280px; height: 14px; margin-left: -140px;87    background: #EAEAEA; border-radius: 8px; opacity: 0.6;88  }89</style>90</head>91<body>92<div id="render-target">93  <!-- Status bar -->94  <div class="status-bar">95    <div style="display:flex; align-items:center;">96      <div>9:14</div>97      <div class="notif-dots">98        <div class="dot"></div>99        <div class="dot"></div>100        <div class="dot"></div>101        <div class="dot"></div>102      </div>103      <div style="width:10px; height:10px; background:#EAEAEA; border-radius:50%; margin-left:16px;"></div>104    </div>105    <div class="status-right">106      <!-- Wi‑Fi icon -->107      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">108        <path d="M2 8c5-4 15-4 20 0" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"/>109        <path d="M5 11c3-3 11-3 14 0" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"/>110        <path d="M8 14c2-2 6-2 8 0" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"/>111        <circle cx="12" cy="18" r="2" fill="#EAEAEA"/>112      </svg>113      <!-- Battery icon -->114      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">115        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#EAEAEA" stroke-width="2"/>116        <rect x="4" y="8" width="12" height="8" fill="#EAEAEA"/>117        <rect x="20" y="10" width="2" height="4" fill="#EAEAEA"/>118      </svg>119    </div>120  </div>121 122  <div class="top-area">123    <!-- Back button -->124    <div class="back-row">125      <div class="back-btn">126        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">127          <path d="M15 19L8 12l7-7" stroke="#EAEAEA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>128        </svg>129      </div>130    </div>131 132    <!-- Title -->133    <div class="title">Passwords & accounts</div>134  </div>135 136  <div class="content">137    <!-- Section: Passwords -->138    <div class="section-title">Passwords</div>139    <div class="list-row">140      <div class="left">141        <div class="app-icon">G</div>142        <div class="primary">Google</div>143      </div>144      <div style="height: 40px;"></div>145    </div>146 147    <!-- Section: Autofill service -->148    <div class="section-title">Autofill service</div>149    <div class="list-row" style="border-bottom: none;">150      <div class="left">151        <div class="app-icon">G</div>152        <div class="primary">Google</div>153      </div>154      <div class="right-icons">155        <div class="vert-divider"></div>156        <!-- Settings (gear) icon -->157        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">158          <circle cx="12" cy="12" r="3.5" stroke="#8AB4F8" stroke-width="2"/>159          <path d="M12 2v3M12 19v3M4.7 4.7l2.1 2.1M17.2 17.2l2.1 2.1M2 12h3M19 12h3M4.7 19.3l2.1-2.1M17.2 6.8l2.1-2.1"160                stroke="#8AB4F8" stroke-width="2" stroke-linecap="round"/>161        </svg>162      </div>163    </div>164 165    <!-- Section: Accounts for Owner -->166    <div class="section-title" style="margin-top: 58px;">Accounts for Owner</div>167 168    <div class="account-row">169      <div class="left">170        <div class="app-icon">G</div>171        <div class="account-text">172          <div class="primary">amelia.miller2709@gmail.com</div>173          <div class="secondary">Google</div>174        </div>175      </div>176    </div>177 178    <div class="account-row">179      <div class="left">180        <div class="app-icon">G</div>181        <div class="account-text">182          <div class="primary">jasonsmith9810244659106538@g..</div>183          <div class="secondary">Google</div>184        </div>185      </div>186    </div>187 188    <div class="add-row">189      <!-- Plus icon -->190      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">191        <path d="M12 5v14M5 12h14" stroke="#8AB4F8" stroke-width="2.8" stroke-linecap="round"/>192      </svg>193      <div>Add account</div>194    </div>195 196    <div class="divider-space"></div>197 198    <!-- Toggle section -->199    <div class="toggle-section">200      <div class="toggle-text">201        <div class="toggle-title">Automatically sync app data</div>202        <div class="toggle-sub">Let apps refresh data automatically</div>203      </div>204      <div class="toggle"></div>205    </div>206  </div>207 208  <!-- Gesture bar -->209  <div class="gesture-pill"></div>210</div>211</body>212</html>