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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212; /* dark theme */15    color: #EDEDED;16    font-family: "Roboto", "Inter", Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    color: #fff;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon {40    width: 36px;41    height: 36px;42    display: inline-flex;43    align-items: center;44    justify-content: center;45  }46 47  /* Back + title area */48  .header {49    position: absolute;50    top: 110px;51    left: 0;52    width: 100%;53    padding: 26px 40px 0 40px;54  }55  .back-row {56    display: flex;57    align-items: center;58    gap: 16px;59    color: #fff;60    margin-bottom: 20px;61  }62  .back-icon {63    width: 60px;64    height: 60px;65  }66  .page-title {67    font-size: 96px;68    line-height: 1.08;69    font-weight: 500;70    margin: 40px 0 20px 0;71    color: #FAFAFA;72  }73 74  /* Content */75  .content {76    position: absolute;77    top: 380px;78    left: 0;79    right: 0;80    padding: 0 40px 40px 40px;81  }82  .section-label {83    color: #98E698; /* light green accent */84    font-size: 38px;85    margin: 40px 0 18px 0;86    font-weight: 500;87  }88  .list-item {89    display: flex;90    align-items: center;91    padding: 24px 0;92    border-bottom: 1px solid rgba(255,255,255,0.06);93  }94  .avatar {95    width: 88px;96    height: 88px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 44px;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #757575;104    font-size: 22px;105    margin-right: 28px;106  }107  .item-text {108    display: flex;109    flex-direction: column;110    gap: 10px;111  }112  .item-title {113    font-size: 44px;114    color: #FFFFFF;115  }116  .item-subtitle {117    font-size: 36px;118    color: #9E9E9E;119  }120 121  .plain-row {122    padding: 18px 0 24px 0;123    font-size: 44px;124    color: #FFFFFF;125    border-bottom: 1px solid rgba(255,255,255,0.06);126  }127 128  /* Add account row */129  .add-row {130    display: flex;131    align-items: center;132    gap: 24px;133    padding: 34px 0;134    border-bottom: 1px solid rgba(255,255,255,0.06);135  }136  .plus-icon {137    width: 64px;138    height: 64px;139    border-radius: 32px;140    display: inline-flex;141    align-items: center;142    justify-content: center;143    border: 2px solid #ddd;144    color: #ddd;145    font-size: 44px;146  }147  .add-text {148    font-size: 50px;149    color: #FFFFFF;150  }151 152  /* Sync toggle section */153  .sync-section {154    margin-top: 22px;155    padding-top: 34px;156    border-top: 1px solid rgba(255,255,255,0.08);157  }158  .sync-row {159    display: flex;160    align-items: center;161    justify-content: space-between;162    padding: 24px 0 10px 0;163  }164  .sync-title {165    font-size: 54px;166    color: #FFFFFF;167  }168  .switch {169    width: 160px;170    height: 84px;171    background: #76D98E;172    border-radius: 42px;173    position: relative;174    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);175  }176  .switch::after {177    content: "";178    position: absolute;179    top: 8px;180    right: 8px;181    width: 68px;182    height: 68px;183    border-radius: 34px;184    background: #FFF;185    box-shadow: 0 2px 4px rgba(0,0,0,0.3);186  }187  .sync-sub {188    font-size: 34px;189    color: #BDBDBD;190    padding-bottom: 8px;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Status bar -->198  <div class="status-bar">199    <div>3:52</div>200    <div class="status-icons">201      <!-- simple status icons -->202      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" opacity="0.18"></circle><path d="M4 12h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>203      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l6 6 12-12" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>204      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>205      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/></svg>206      <svg class="icon" viewBox="0 0 24 24"><path d="M20 7v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V7m5-2h2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>207      <svg class="icon" viewBox="0 0 24 24"><path d="M7 20h10a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4z" stroke="#fff" stroke-width="2" fill="none"/></svg>208      <svg class="icon" viewBox="0 0 24 24"><path d="M6 18h12V8h-3V6H9v2H6v10z" fill="#fff"/></svg>209    </div>210  </div>211 212  <!-- Header with back and title -->213  <div class="header">214    <div class="back-row">215      <svg class="back-icon" viewBox="0 0 24 24">216        <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217      </svg>218    </div>219    <div class="page-title">Passwords &amp; accounts</div>220  </div>221 222  <!-- Content -->223  <div class="content">224    <div class="section-label">Passwords</div>225    <div class="list-item">226      <div class="avatar">[IMG: Google]</div>227      <div class="item-text">228        <div class="item-title">Google</div>229        <div class="item-subtitle">3 passwords</div>230      </div>231    </div>232 233    <div class="section-label" style="margin-top: 36px;">Autofill service</div>234    <div class="plain-row">None</div>235 236    <div class="section-label" style="margin-top: 40px;">Accounts for Owner</div>237 238    <div class="list-item">239      <div class="avatar">[IMG: Google]</div>240      <div class="item-text">241        <div class="item-title">cole2dbwpersonatest2@gmail.com</div>242        <div class="item-subtitle">Google</div>243      </div>244    </div>245 246    <div class="list-item">247      <div class="avatar">[IMG: Google]</div>248      <div class="item-text">249        <div class="item-title">dbwscratch.test.id3@gmail.com</div>250        <div class="item-subtitle">Google</div>251      </div>252    </div>253 254    <div class="list-item">255      <div class="avatar">[IMG: Guest Avatar]</div>256      <div class="item-text">257        <div class="item-title">Guest</div>258        <div class="item-subtitle">LMS Applications</div>259      </div>260    </div>261 262    <div class="add-row">263      <div class="plus-icon">+</div>264      <div class="add-text">Add account</div>265    </div>266 267    <div class="sync-section">268      <div class="sync-row">269        <div class="sync-title">Automatically sync app data</div>270        <div class="switch"></div>271      </div>272      <div class="sync-sub">Let apps refresh data automatically</div>273    </div>274  </div>275 276</div>277</body>278</html>